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 指定一个路由地址作为跳转地址
网友评论