反应路由器多个参数不起作用

Question

我想从path="/users/:login/:repo"查看登录的存储库详细信息页面，但它不起作用并查看用户配置文件组件。 这是点击：

<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"匹配的任何 url 也将由"/users/:login"匹配，除非您使用限定符exact否则

。在Switch上下文中，这意味着每次都会呈现UserProfile，因为它排在第一位。

解决方案是改变：

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

自

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