react-router v4 和 NavLink - 路由需要在单独的组件中

react-router v4 and NavLink - routes need to be in a separate component

点击 NavLink 并未更新我的应用程序。 NavLink 预计会根据过滤器 link.

更新待办事项列表

解决方案是将路由提取到一个单独的无状态功能组件中:

const MyRoutes = () => (
    <Route path='/:filter?' component={App} />
);

const Root = ({store}) => (
    <Provider store={store}>
        <Router>
            <MyRoutes/>
        </Router>
    </Provider>
);

这有效。

但在 Router 中使用相同的 Route,NavLink 不会触发新的待办事项列表。

什么可以解释我必须将路由提取到单独的组件中?

您不需要这样做。正确的方法是从 react-router-dom 导入 Switch,并像这样使用它:

import { Switch, BrowserRouter as Router, Route } from 'react-router-dom'

const Root = ({store}) => (
    <Provider store={store}>
        <Router>
            <Switch>
                <Route path='/:filter' component={App} />
            </Switch> 
        </Router>
    </Provider>
);

如果要定义主路由,需要使用组件的exact prop Route:

<Route exact path='/:filter' component={App} />

编辑: 要使用 exact,您的路线需要在 Switch