Question

我在每条路径上都显示组件有问题，因为React Router 4没有对该路由使用精确的路由（或者出现了）。

<Route path="/" exact component={Explore} />
<Route path="/about" component={About} />

// The one making problems
<Route
    path="/:username"
    exact={true}
    render={props => <Profile {...props} />}
/>

因此，当我转到http://example.com/about时，仍在渲染我的个人资料组件。我猜问题出在路由中，因为它期望参数:username，并且在/（根）之后出现。难道我做错了什么？我可以为/:username添加另一条路线，例如/profile/:username，但如果可能的话，我希望保持原样。

Answer 1

假设您没有使用Switch。 Switch将解决您的问题，因为它只会呈现匹配的第一个路径。

<Switch>
  <Route path="/about" component={About}/>
  <Route path="/:username" render={props => <Profile {...props} />} />
  <Route path="/" component={Explore} />
  <Route component={NotFoundPage} />
</Switch>

使用动态参数反应路由器4和确切路径

1 个答案: