reactjs - 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

您需要反转路由的顺序，因为 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 正在被渲染，而不是在此之后定义的其他路由被检查。