关于reactjs：React Router-将路径ID传递给onEnter函数

React Router - pass path id to onEnter function

我以前使用过React Routers URL参数来过滤内容数组并返回想要的特定内容(按ID过滤)。现在为我提供了一个单独的API，这意味着我不再需要返回所有内容然后进行过滤，而是可以进行一次调用并返回该特定项目的数据。

要进行页面加载调用，我需要访问Route onEnter函数上的ID。是否可以在此onEnter函数上使用URL参数，如果不能，那么从容器组件中触发分派函数将是显而易见的解决方案吗？

1
2
3
4
5

<Route
path={'locker/my-content/:id'}
component={ManageContentPage}
onEnter={() => { store.dispatch(loadMyContent(// NEED ID HERE)); }}
/>

您可以通过onEnter函数的参数nextState访问URL参数。这是一个示例：React-router-如何在onEnter中使用路由参数？

如果您正在使用react-router 4，则onEnter道具不再存在，并且您必须使用render道具来实现类似的功能。

对于反应路由器<4

传递给onEnter的任何函数都将使用nextState作为其参数。该状态对象将包含您的params

因此要访问此值，您需要类似以下内容：

1
2
3
4
5

<Route
path={'locker/my-content/:id'}
component={ManageContentPage}
onEnter={(nextState) => { store.dispatch(loadMyContent(nextState.params.id)); }}
/>