Question

我正在尝试实现一种路由结构，当路径为/：username时，用户可以转到另一个用户的页面或他们自己的页面。我还想用路径/ watch或/ watch /渲染另一个页面。Facebook具有类似的设置，其中/：username将您带到您的页面，或者另一个用户的/ watch /例如是一个页面。是否有最佳实践来使用react-router实现此目标？

到目前为止，我有类似的东西。

<Route path="/" exact component={authenticated ? Home : Index} />
<Route path="/watch/" component={Watch} />
<Route path="/:username" exact component={({match}) => {
  if(match.params.username === data.Username) {
   return <ProfilePage match={match} />
  } else {
   return <UserPage match={match} />
  }
}} />

现在，如果我要/ watch /，则还将渲染配置文件组件。那么：username会匹配我所有的路线吗？

Answer 1

您已经推断出，/:username与/watch/同时匹配，因为这两种模式都与URL /watch/相匹配。

非常感谢，对于这样的情况，React Router提供了<Switch> component，其中只显示了第一个匹配项：

<Switch>
  <Route path="/watch/" component={Watch} />
  <Route path="/:username" component={...} />
</Switch>

现在，使用URL /watch/，即使第二条路线也匹配，也仅呈现第一条路线。

React Router渲染组件带有/：username或/ component /

1 个答案: