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

React路由器多个参数不工作

router path hyperlink parameters reactjs

Wojciech Nowakowski · 技术社区 · 6 年前

我想从 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 回复 | 直到 6 年前

Shubham Khatri 6 年前

您需要颠倒路线的顺序,因为 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,而不会检查在此之后定义的其他路由。

-1

mpontus 6 年前

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

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

解决方案是改变:

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

到

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

推荐文章

KiraHoneybee · 具有构造函数参数的模板化类

2 年前

Jiji · 将简单对象强制转换为简单的通用接口

6 年前

Wojciech Nowakowski · React路由器多个参数不工作

6 年前

user8874475 · python使用len函数和list作为参数[关闭]

6 年前

Ashish K · 在Groovy中将字符串参数传递给对象方法参数

6 年前

snuff · c语法的问题-const*const*定义

7 年前

Val · 将整个结构指针数组传递给函数的语法是什么?[已关闭]

7 年前

dragi · 将参数传递到void方法(整数或对象)

7 年前

msinghm · 参数仅与其他参数一起工作,但我希望它们独立工作

7 年前

user3251349 · SSRS:参数未过滤MySQL查询

7 年前