码迷,mamicode.com
首页 > Web开发 > 详细

区别React-Router中match的path和url

时间:2018-05-27 12:14:35      阅读:957      评论:0      收藏:0      [点我收藏+]

标签:React Router   Route组件   match   path   url   

问题

React Router开发中有关<Route>组件的match属性的两个属性path和url,容易让人混淆,特别记录于此。

解释

官方描述如下:

  • path - (string) The path pattern used to match. Useful for building nested <Route>s
  • url - (string) The matched portion of the URL. Useful for building nested <Link>s

path用来标识路由匹配的URL部分。React Router使用了Path-to-RegExp库将路径字符串转为正则表达式。然后正则表达式会匹配当前路径。

当路由路径和当前路径成功匹配,会生成一个对象match。match对象有更多关于URL和path的信息。这些信息可以通过它的属性获取,如下所示:

  • match.url.返回URL中匹配部分的字符串。用于创建嵌套的<Link>很有用。
  • match.path.用于匹配路径模式。用来创建嵌套的<Route>。
  • match.isExact.返回布尔值,如果准确(没有任何多余字符)匹配则返回true。
  • match.params.返回一个对象包含Path-to-RegExp包从URL解析的键值对。

只有完全理解了<Route>的这个match对象属性及其有关属性,才能算是掌握了基本类型嵌套路由开发的基础部分(本人拙见,仅供参考)。

举例

我们不妨考虑一个小例子,如下所示:

观察路由"/users/:userId"
此例中,match.path的返回值将是 "/users/:userId"。
而match.url 的返回值将是:userId的值,例如"users/5"。
请注意上面官方描述中,match.path指用于匹配的模式部分,代表了一种格式,而match.url代表一个具体的计算后的路径表达值。

引用

1.https://www.zcfy.cc/article/react-router-v4-the-complete-guide-mdash-sitepoint-4448.html
2.https://teamtreehouse.com/community/what-is-the-difference-between-path-and-url-in-match-prop-of-reactrouter-route-component-react-router-basics
3.https://reacttraining.com/react-router/

区别React-Router中match的path和url

标签:React Router   Route组件   match   path   url   

原文地址:http://blog.51cto.com/zhuxianzhong/2120738

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!