标签：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