React-Router 4 两个常用路由变量

  • Z时代
  • 2024-01-10
  • 分类：综合

react

讲真我个人不太喜欢4.x版本，虽然作者自信动态路由的形式符合React组件化的哲学，但是路由和一般组件耦合太深，而且后期组件分片也麻烦，以后需要重构的话怕是会一番折腾。同学公司用的还是3.x版本。

不过今天做项目发现npm上搜索结果已经没有3.x了，只有4.x和2x版本，似乎暗示着未来的趋势？反正项目不算复杂，这次先用4.2.

4.x版的动态路由主要是用Link跳转url，Route渲染组件。

当我们用Route渲染组件的时候（component={CompName}），react-router会自动给被渲染的组件的props中添加两个变量，一个是location。一个是match。

当我们通过render/children函数渲染jsx的时候（render={(match)=>(JSX)}）,将之作为参数即可。

locaton:表示此时页面在app应用中的位置(也就是此时的url)，文档告诉我们这个变量大概是这样子：

1 {
2   key: 'ac3df4', // not with HashHistory!
3   pathname: '/somewhere'
4   search: '?some=search-string',
5   hash: '#howdy',
6   state: {
7     [userDefined]: true
8   }
9 }

View Code

如果组件预期是通过Route渲染，我们可以在定义组件的代码中 使用location变量提供的这些信息。

match:存储有当前  url和渲染该组件的<Route path>  匹配信息的对象变量：

有params，isExact，path，url四个属性。

注意params是动态路由参数，如:

1 //pid即为动态路由参数
2 <Route path="/product/:pid/detail" component={Product}>
3 //在Product组件中，this.props.match.params.pid即可获取该段的参数

一段时间没使用又忘了，还以为是查询字符参数呢

以上是 React-Router 4 两个常用路由变量 的全部内容， 来源链接： utcz.com/z/382304.html

回到顶部