代码之家 › 专栏 › 技术社区 › Wojciech Nowakowski

React路由器多个参数不工作

router path hyperlink parameters reactjs

2

Wojciech Nowakowski · 技术社区 · 7 年前

我想从 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>

2 回复 | 直到 7 年前

1

5

Shubham Khatri 7 年前

您需要颠倒路线的顺序,因为 Switch 匹配第一条路线

<Switch>
    <Route exact path="/" component={Contributors}/>
    <Route  path="/users/:login/:repo" component={RepoPage}/>
    <Route  path="/users/:login" component={UserProfile}/>
</Switch>

使用React路由器,作为精确匹配路径前缀的路径也会匹配,因此 "/users/:login/:repo" 也匹配 "/users/:login" ,并且由于您使用的是switch,因此将呈现RepoPage,而不会检查在此之后定义的其他路由。

2

-1

mpontus 7 年前

匹配的任何url "/users/:login/:repo" 将匹配 "/users/:login" 同样,除非您使用 exact 合格者

在以下情况下: Switch 这意味着 UserProfile 将每次渲染,因为它位于第一位。

解决方案是改变:

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

到

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