React Router语言 - 将路径 ID 传递给 onEnter 函数

Question

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

要在页面加载时调用，我需要访问 Route onEnter 函数上的 id。是否可以在此 onEnter 函数上使用 URL 参数，如果不能 - 从容器组件触发调度函数是否是显而易见的解决方案？

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

Answer 1

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

Answer 2

如果您使用的是 react-router 4+，那么onEnterprop 将不再存在，您必须使用renderprop 来实现类似的功能。

对于反应路由器<4

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

因此，若要访问此值，需要如下所示的内容：

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