要使props.history.push生效,必须确保在组件渲染之前调用该方法。以下是一个示例解决方案:
import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
const MyComponent = () => {
const history = useHistory();
useEffect(() => {
const navigate = () => {
history.push('/destination');
};
// 第一次调用
navigate();
// 第二次调用
setTimeout(navigate, 0);
}, []);
return (
My Component
);
};
export default MyComponent;
在上面的示例中,我们使用了useEffect钩子来确保在组件渲染之前调用props.history.push。在useEffect内部,我们定义了一个名为navigate的函数,该函数用于导航到目标路径。我们首先在useEffect内部的第一次调用中调用navigate函数,然后使用setTimeout将其作为一个延时任务在下一个事件循环中执行,以确保props.history.push生效。