React Router 多个参数不起作用

Question

我想从 path="/users/:login/:repo" 查看登录的回购详细信息页面，但它不起作用并查看 UserProfile 组件。这里是点击：

 <Link to={this.props.location.pathname+'/'+item.name}>
   <div>
      <h4>{item.name}</h4>
      <p>{item.description} </p>
   </div>
 </Link>


<Switch>
    <Route exact path="/" component={Contributors}/>
    <Route  path="/users/:login" component={UserProfile}/>
    <Route  path="/users/:login/:repo" component={RepoPage}/>
</Switch>

Answer 1

任何被 "/users/:login/:repo" 匹配的 url 也将被 "/users/:login" 匹配，除非你使用 exact 限定符。

在 Switch 的上下文中，这意味着 UserProfile 每次都会渲染，因为它先出现。

解决方案是更改：

<Route  path="/users/:login" component={UserProfile}/>

到

<Route exact path="/users/:login" component={UserProfile}/>

Answer 2

您需要颠倒路线的顺序，因为 Switch 匹配第一条路线

<Switch>
    <Route exact path="/" component={Contributors}/>
    <Route  path="/users/:login/:repo" component={RepoPage}/>
    <Route  path="/users/:login" component={UserProfile}/>
</Switch>

对于 React-router，作为完全匹配路径前缀的路径也被匹配，因此 "/users/:login/:repo" 也匹配 "/users/:login"，并且由于您使用的是开关，RepoPage 正在渲染而不是在此之后定义的其他路线正在接受检查。

React Router 多个参数不起作用

React Router multiple params doesn't work

parameters

router

path

hyperlink

reactjs