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
内
点击 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