React Router DOM v6 替代 this.props.match.params、prevProps.match.params、this.props.location.pathname、prevProps.location.pathname

Question

我以前使用过 React Router DOM v4 和以下内容：

componentDidUpdate(prevProps) {
    if ((prevProps.match.params[0] !== this.props.match.params[0])) {
        ...some code
    }
}

componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname){
        this.loadContent();
    }
}

我应该如何在 v6 中替换它们？

Answer 1

使用带有依赖关系的useEffect挂钩来替换componentDidUpdate ，使用useLocation和useParams挂钩来替换location和match道具。

例子：

import { useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';

...

const{ pathname } = useLocation();
const {/* destructured param */} = useParams();

useEffect(() => {
  loadContent();
}, [pathname]);

useEffect(() => {
  ...some code
}, [/* destructured param */]);

如果您的问题真的是关于如何将react-router-dom@6钩子与旧的 class 组件一起使用，那么您需要创建一个自定义的高阶组件来使用钩子并注入道具。

例子：

import {
  useLocation,
  useParams,
  /* other hooks */
} from 'react-router-dom';

const withRouter = Component => props => {
  const location = useLocation();
  const params = useParams();
  // other hooks

  return (
    <Component
      {...props}
      {...{ location, params, /* other hook props */ }}
    />
  );
};

export default withRouter;

然后您可以装饰您的 class 组件并使用componentDidUpdate生命周期方法并访问this.props.location和this.props.params 。 请注意，现在没有match道具，例如this.props.match.params现在只是this.props.params 。