我想从 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>
最佳答案
您需要反转路由的顺序,因为 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 正在被渲染,而不是在此之后定义的其他路由被检查。
关于reactjs - React Router 多个参数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50187829/