Question

我以前使用React Routers 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 - how to use route params in onEnter?

Answer 2

如果你正在使用react-router 4+，那么onEnter道具不再存在，你将不得不使用render道具来实现类似的功能。

对于react-router＆lt; 4

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

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

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

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

2 个答案:

对于react-router＆lt; 4