reactjs - 如何在类中从react-router-dom v6获取参数值

Question

我正在使用 react-router-dom v6，不知道如何获取参数值

例如:http://localhost:3000/user/:id

我想获取:id

有人使用 hook useParams 获取，但我正在使用类，所以我不能使用 hook。

Answer 1

库提供的 HOC withRouter 已在 React Router v6 中弃用。如果您需要使用 v6 并且正在使用基于类的 React 组件，那么您将需要编写自己的 HOC 来包装 v6 use* Hook 。

例如:

export function withRouter( Child ) {
  return ( props ) => {
    const location = useLocation();
    const navigate = useNavigate();
    return <Child { ...props } navigate={ navigate } location={ location } />;
  }
}

如果您有一个需要迁移到 v6 的大型代码库，但还没有将所有基于类的组件迁移到函数式组件中，这将很有用。

这是基于开发团队的建议，如 Github 问题所述:https://github.com/ReactTraining/react-router/issues/7256