React Router V4的变化

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

如果URL /约，然后 <About>，<User>和<NoMatch>将所有渲染，因为他们都>匹配的路径。这是设计，...