React-Router

参考：

React-Router

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