react路由

安装：

npm i react-router-dom@5.0

基本使用：

import {
  HashRouter as Router,
  Route,
  NavLink,
} from 'react-router-dom'
function App () {
  return (
    <Router>
      <div className='nav'>
        <NavLink to='/' exact> 主页</NavLink>
        |<NavLink to='/about'>关于</NavLink>      
      </div>
      <div className='views'>
          <Route path='/' component={Home} exact></Route>
          <Route path='/about' component={About}></Route>
      </div>
    </Router>
  )
}

详细讲解：

路由组件：

    HashRouter 哈希路由 as Router
    BrowserRouter 浏览器路由 as Router
    Route 存放路由的页面：
        path 路径
        component组件
        render渲染
    NavLink 导航链接：
        to 链接地址
        exact精确匹配
        匹配的链接会自动添加class active
    Link 链接：
        to 链接地址
        exact精确匹配
    Redirect 重定向：
        to重定向到
        from 从
    Switch 一次只匹配一个路由

路由props参数：

match
        path路径
        url地址
        isExact 精确匹配
        params参数
    history
        go跳转
        goBack返回
        goForward 前进
        push跳转
        replace替换
        listen监听
    location
        pathname路径地址
        search查询
        hash哈希
        state状态
    NavLink to={{
          pathname:"/details/abc",
          search:"name=mumu&age=18",
          hash:"good",
          state:{reidrect:"/about"}
        }}>详情abc</NavLink>

路由传参：

<NavLink to=“/details/abc”>
<Route path="/details/:id" component={Details}>
props.match.params.id    //获取参数