react-router-dom

官网：https://reacttraining.com/react-router/web/；

安装：npm i react-router-dom

基础知识

1、BrowserRouter和HashRouter
访问路径如：http://localhost:8080/#/repos（hash）
          http://localhost:8080/repos（browser）

2、Switch和exact
Switch:代表匹配到一个，<Switch><Route/></Switch>后面路由不在匹配，如Switch会认为‘/about’是’/‘和‘/about’两个路由，若匹配'/'
会匹配'/'和'/about'谁在前面匹配哪一个。
exact:写在<Route exact>,表示匹配完全一样的路由，‘/about’就是‘/about’而不会被认为‘/’和’/about‘

3、Link和NavLink
/**Link**/
<Link to='path/paramValue'>基本用法</Link>
<Link to={{pathname:'/about',
           search:'?sort=name',
           state:{data:'hello'}
         }}
      activeStyle={{激活时路由样式}}
      activeClassName="selected"
>完整用法</Link>
也可以传其他；
/**NavLink**/
<NavLink to='path/paramVal'>基础用法</NavLink>
<NavLink exact to='path/paramVal'>完整用法</NavLink>
exact:仅当url与NavLink里to的值完全相等时，才应用类名为selected的CSS样式;
isActive: ：function;用于添加额外逻辑以确定链接是否处于活动状态的功能
activeClassName：string;
activeStyle：object;

重定向<Redirect>

1、写在Route中
<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>
2、写在组件中
render(){
  return(
    true?<Redirect to='/login'/>:<div>some</div>
  )
}
或者写在其他生命周期中类似
3、<Redirect
        to={{
          pathname: "/login",
          search: "?utm=your+face",
          state: { referrer: currentLocation }
       }}
    />
4、from，
exact：规定from匹配pathname时是精确还是模糊。如：
          精确：from=”/dd” 必须匹配 http://127.0.0.1:9090/dd；
          模糊：from=”/dd“ 可以匹配http://127.0.0.1:9090/dd/ff/ee
strict：表示是否匹配pathname部分末尾的“/”符号 如：from=”/dd/” 必须匹配 http://127.0.0.1:9090/dd/而非 http://127.0.0.1:9090/dd
这三个参数只能用在Switch组件下面的Redirect组件中。
5、push
加上push参数会调用history.pushState， <Redirect push to={{...} /> 此时浏览器将url加入到浏览历史中，浏览器后退键有效

　　具体使用

有两种使用方式，假装成为组件式使用和方法式使用。

组件式使用
this.props.children是路由显示的内容
1、将App.js修改成 组件 的形式，作为路由显示的区域
<div>{this.props.children}</div>
2、新建Router.js
import {BrowserRouter as Router , Rouute } from 'react-router-dom'
import App from 'App.js路径'
import 组件 from '组件地址'
class Router extends Component{
  render(){
    return(
      <Router>
        <App>
           <Route path='/' exact component={componentname}></Route>
           //配置子路由
           <Route path='/' exact render={()=>{
             return <ComponentName> 
                         <Route path='/url' component={SubComponentName}/>
                         ...
                         /**要在含有子路由的组件期望子路由显示的区域写上{this.props.children}**/
              </ComponentName>
           }}></Route>
        </App>
      </Router>
    )
  }
}
3、将Router.js引入到index.js,根组件改为<Router/>

　　方法式使用

未模块化
在app.js
import {BrowserRouter as Router , Route , Link} from 'react-router-dom'
引入所有的组件。
<Router>
  <Link to='path'></Link>
  <Route path='path' component={ComponentName}/>
</Router>
 模块化

 新建router.js

引入所需的所有组件
export default routerData=[
{key:'',path:'',component={},routes:[{}]}
]
在app.js中引入routerData
routeData.map((route,key)=>{
  return <Route path={route.path}
          key={key} 
          render={props=>(<route.component {...props} 
          routes={route,routes}/>)}/>
})
配置子路由显示区{this.props.routes}

　　路由传参

1、动态传参 刷新参数不会丢失
<Link to='/shui/13'></Link>
<Route path="/:userName/:id" component={UserPage}/>
解析：this.props.match.params
2、刷新参数会丢失
<Link to={{pathname:'',state||query={data}}}></Link>
解析：this.props.location.state