Question

单击NavLink未更新我的应用程序。 NavLink有望根据过滤器链接更新待办事项列表。

解决方法是将路由提取到单独的无状态功能组件中：

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

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

这很有效。

但是在路由器内部使用相同的路由时，NavLink不会触发新的待办事项列表。

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

Answer 1

你不需要这样做。正确的方法是从Switch导入react-router-dom，并按照以下方式使用它：

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的{{1}}道具：

Route

编辑：要使用<Route exact path='/:filter' component={App} />，您的路线必须位于exact

内

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

1 个答案: