Question

我遇到了React Router V4的问题。我有以下代码

<Provider store={store}>
    <ConnectedRouter history={history}>
      <Route path='/overview/day/:date' component={OverviewDetail}></Route>
      <Route path='/overview/day' component={Overview}></Route>
    </ConnectedRouter>
</Provider>

每当我转到页面/overview/day时，它都会使概览组件变好。但是，当我去overview/day/2015-06-01时，它会渲染两个组件。有什么我想念的吗？

Answer 1

你的例子应该是这样的

import { Switch } from 'react-router-dom'

<Provider store={store}>
  <ConnectedRouter history={history}>
    <Switch>
      <Route exact path='/overview/day' component={Overview} />
      <Route path='/overview/day/:date' component={OverviewDetail} />
    </Switch>
  </ConnectedRouter>
</Provider>

Answer 2

要构建Rei Dien's answer，我认为这是正确的，并且还提供更多背景，示例应该是：

import { Switch } from 'react-router-dom'

<Provider store={store}>
  <ConnectedRouter history={history}>
    <Switch>
      <Route exact path='/overview/day' component={Overview} />
      <Route path='/overview/day/:date' component={OverviewDetail} />
    </Switch>
  </ConnectedRouter>
</Provider>

来自official documentation

<强> <Switch>

呈现匹配的第一个孩子<Route>或<Redirect>   位置。

这与仅使用一堆<Route> s有什么不同？

<Switch>的独特之处在于它专门呈现路线。在   相反，与位置匹配的每个<Route>都会包含一致。   请考虑以下代码：
<Route path="/about" component={About}/> 
<Route> path="/:user" component={User}/> 
<Route component={NoMatch}/> 
如果网址是/ about，那么 <About>，<User>和<NoMatch>将全部呈现，因为它们全部＆gt;匹配路径。这是设计，......

对React Router V4的更改

2 个答案: