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"，并且由于您使用的是开关，因此RepoPage将被渲染而不是其他路径在此之后定义被检查。

Answer 2

"/users/:login/:repo"匹配的任何网址也会被"/users/:login"匹配，除非您使用exact限定符。

在Switch的上下文中，它意味着UserProfile每次都会呈现，因为它是第一个。

解决方案是改变：

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

到

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

React Router多个参数不起作用

2 个答案: