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

【问题标题】：React Router - pass path id to onEnter functionReact Router - 将路径 ID 传递给 onEnter 函数
【发布时间】：2017-08-09 11:32:04
【问题描述】：

我之前使用 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)); }}
/>

【问题讨论】：

标签： reactjs redux react-router

【解决方案1】：

您可以通过 onEnter 函数的参数nextState 访问 URL 参数。这是一个例子：React-router - how to use route params in onEnter?

【讨论】：

【解决方案2】：

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

对于 react-router

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

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

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

【讨论】：