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

React路由器多个参数不工作

router path hyperlink parameters reactjs

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 年前

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,而不会检查在此之后定义的其他路由。

-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}/>

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

5 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

5 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前