参考:
React Router 使用教程/阮一峰/ 2016年5月25日
Histories
React Router 是建立在 history 之上的。 history 去监听浏览器地址栏的变化, 并解析 URL 转化为 location 对象。
<Router history='BrowserRouter'>
<Route path="/" component={App}/>
</Router>
history 属性 | 常用的 history 有三种形式 |
---|---|
HashRouter | 通过URL的hash部分(#)切换 |
BrowserRouter | 调用的是浏览器的History API(/) |
createMemoryHistory | 用于服务器渲染。它创建一个内存中的history对象,不与浏览器URL互动。 |
路由导航输入
动态路由
<Routes>
<Route path="/hello/:name" element={<Hello />} /> // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)" element={<Hello />} /> // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*" element={<Hello />} /> // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg
<Route path="about" render={() => <Redirect to="about-us" />}
</Routes>
react 路由三种传参
params参数
传递params先注册动态路由path="/a/:id"
,this.props.match.params
接收params参数
<Route exact path="/a/:id" component={A} />
<Link activeClassName="demo" to="/a/2"> params参数</Link>
search 参数
search 参数得到?name=roe
,需要转化处理
<Link activeClassName="demo" to="/a/2?name=roe"> location.search参数传递 </Link>
const { name } = qs.parse(this.props.location.search.slice(1))
state 参数
不想出现在地址栏的参数
<Link activeClassName="demo" to="{{pathname:'a', state:{name:'roe'}}}> state参数传递 </Link>
const { name } = this.props.location.state || ""
除了 通过link标签的跳转 还可以通过js方式跳转
通过 props.history 属性对象中的 push 和 replace方法跳转
this.props.history.push('/a/2');
this.props.history.push('/a?name=zyc');
this.props.history.push('/a', {name: 'zyc'});
路由匹配
this.props={
routes,
// http://example.com/the/:id/path?the=query
// URL 的对象形式表示,通过 location.search 字段可以获取到 url 中的 query 信息
location = {
pathname: Pathname, // /the/path
search: QueryString,// ?the=query
query: Query,
state: LocationState,
action: Action,
key: LocationKey
},
// 具体的 url 信息,在 match.params 字段获取到各个路由参数 :id
match = { params }
}
路径语法
- :paramName – 在下一个 /、? 或 # 前,匹配 URL 的局部。被匹配的部分被称为 param(参数)
- () 匹配URL的一部分,是可选的
- '*‘ 匹配任意字符(非贪婪)直到 Pattern 中的下一个字符,如果没有下一个字符,那么会一直匹配到URL尾部。同时生成一个 splat param(参数)
- ‘* *’ 匹配任意字符(贪婪的)直到命中下一个字符 /、? 或 #,并生成一个 splat param(参数)
优先级
按顺序
动态路由放最后
路由的钩子
每个路由都有Enter和Leave钩子,用户进入或离开该路由时触发
hooks
useHistory
useLocation
useParams
useRouteMatch