React Router多路由参数失效：/users/:login/:repo无法正确跳转

这个问题我之前也碰到过，其实核心原因就是React Router的Switch组件是按路由定义的顺序从上到下匹配的，一旦找到第一个匹配的路由就会停止后续匹配。

你现在的路由配置里，/users/:login 这个路由在 /users/:login/:repo 前面，而Route的路径匹配默认是前缀匹配——也就是说，当你访问 /users/xxx/yyy 时，它会被 /users/:login 先匹配到（此时:login参数会被解析成xxx/yyy），Switch就直接渲染UserProfile组件了，根本不会去检查后面更具体的路由。

解决方法 #

最简单也最稳妥的方案就是调整路由顺序，把更具体的路由放在前面：

<Switch>
  <Route exact path="/" component={Contributors}/>
  {/* 先匹配带两个参数的具体路由 */}
  <Route path="/users/:login/:repo" component={RepoPage}/>
  {/* 再匹配单个参数的通用路由 */}
  <Route path="/users/:login" component={UserProfile}/>
</Switch>

这样当你访问 /users/xxx/yyy 时，Switch会先匹配到 /users/:login/:repo，正确渲染RepoPage组件；而访问 /users/xxx 时，才会匹配到UserProfile组件。

另外顺带检查下你的Link跳转代码：this.props.location.pathname+'/'+item.name 这个写法是没问题的，但要确保item.name没有包含斜杠或其他特殊字符，避免生成无效路径。

内容的提问来源于stack exchange，提问作者Wojciech Nowakowski