React Router DOM v6 alternative for this.props.match.params,

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挂钩与旧的类组件一起使用，那么你需要创建一个自定义的高阶组件来使用挂钩并注入道具。

示例：

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;

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