React-Router

参考:

React-Router

React Router 使用教程/阮一峰/ 2016年5月25日

文章目录

    • Histories
    • 路由导航输入
      • 动态路由
      • react 路由三种传参
    • 路由匹配
      • 路径语法
      • 优先级
      • 路由的钩子
      • hooks

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(参数)

优先级

按顺序
动态路由放最后

路由的钩子

每个路由都有EnterLeave钩子,用户进入或离开该路由时触发

hooks

useHistory
useLocation
useParams
useRouteMatch

你可能感兴趣的:(react,react.js,前端)