react-router-dom

• BrowserRouter （H5的history模式，不刷新改变地址栏）
  包裹根组件App
  刷新会向服务器请求该地址资源，需要服务器配合
• HashRouter
  刷新不会请求服务器
• MemoryRouter 存在内存中
  地址栏不会改变，刷新回到首页
  react-native可以用

路由传参

// 传递
<Route path="/course/:id" >
<Link to="/course/10" >
// 获取
let { id } = this.props.match.params
URL的查询字符串/foo?bar=baz，可以用this.props.location.query.bar获取。

嵌套路由

// 嵌套route
import { createBrowserHistory } from "history";
<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
    <Route path="/about" ><About /></Route>
  </Route>
</Router>
let { path } = this.props.match
// 保存当前path，避免path更换后，手动改低层级的路由名称
<Route path={`${path}/js`} > </Route>
// 获取后端路由层级进行渲染,省略map函数包裹
<Link to={ `${path}/${course.ID}` } >{course.title}</Link>
// 使用render时，props丢失，但render有默认参数props
<Route path={ `${path}/${course.ID}` } render={ (props) => (
   // 使用work组件本身，work中嵌套work组件
   <Work {...props} data = {course.children} />
)}
</Route>

路由跳转、传参

<Link to={
  { 
    pathname: '/work',
    search: '?a=12',
    hash:'#11'
  }
} />
<Redirect to='/login' />
this.props.history.push('/work') ({pathname:xxxxx,xxx:xxx})
match获取不到search，history可以
import { useParams } from "react-router-dom";
<Route path="/:id" children={<Child />} >
child中 let { id } = useParams()
// 原生的api
let params = new URLSearchParams(location.seatch)
params.get('a') //12

路由改变、history.push()，都会触发componentDidUpdate()，

路由钩子

用来做登录认证

onLeave/onEnter
routerWillLeave 组件钩子

onEnter与onChange

onEnter 触发时机是 is about to be entered，当路由进入即触发。
onChange 触发时机是 the location changes，监听的是子路由。
从'/'页面中跳转到login,触发onEnter，从'/info'页面中跳转到login,触发onChange。

<Route
    path="messages/:id"
    onEnter={
      ({params}, replace) => replace(`/messages/${params.id}`)
    } 
 />

IndexRoute 与IndexRedirect

IndexRoute指定一个路由的默认页。而 IndexRedirect 指定一个路由地址作为跳转地址