react的路由使用也太太太復雜了吧，有各種各樣的的花式，主要是有太多的配置項可以選擇了，接下來就寫一下我自己學到的。
路由的下載
react的路由需要額外下載，然后有三種，分別是供web，軟件，兩種都能用的any。然后我們主要用的是web，下載命令：npm i react-router-dom --save
然后在使用的地方進行引入，import {Link} from 'react-router-dom'
路由的簡單使用
//引入路由
import {Link, Route} from 'react-router-dom'
//引入路由組件
import Home from './component/home'
import About from './component/about'
export default class App extends Component {
render() {
return (
<div>
<h1>React Router Demo</h1>
{/* 普通路由 */}
<Link to="/about">About</Link>
<Link to="/home">Home</Link>
<div>
<Switch>
<Route path="/about" component={About}></Route>
<Route path="/home" component={Home}></Route>
</Switch>
</div>
</div>
)
}
}
需要注意的是，使用router的時候需要在外面套一層BrowserRouter或者HashRouter把所有的包裹住，然后為了簡潔一點，就選擇直接將App包裹，有兩種包裹方式，如下：
區別就是在瀏覽器的地址欄里面是否會有#，並且，BrowserRouter在刷新的時候會以當前的url地址去查找靜態資源，HashRouter會將#后面的地址全部省略。
實際效果：
NavLink的使用
NavLink是Link的一個特定版本，會在匹配上當前的URL的時候給已經渲染的元素添加參數，組件的屬性有：
具體使用：
import './App.css'
export default class App extends Component {
render() {
return (
<div>
<h1>React Router Demo</h1>
{/* Link普通路由 */}
{/* <Link to="/about">About</Link>
<Link to="/home">Home</Link> */}
{/* NavLink路由 */}
<NavLink activeClassName="demo" to="/about">About</NavLink>
<NavLink activeClassName="demo" to="/home">Home</NavLink>
<div>
<Switch>
<Route path="/about" component={About}></Route>
<Route path="/home" component={Home}></Route>
</Switch>
</div>
</div>
)
}
}
//App.css樣式
.demo {
background-color: pink;
color: white;
}
