React Router多个参数不起作用

Question

我想path="/users/:login/:repo"查看登录的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

您需要反转路线的顺序,因为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",并且由于您正在使用switch,因此RepoPage将被渲染,而不是在检查之后定义的其他路由.