在React中,使用history.push
进行页面跳转时,无法更改组件的状态。这是因为history.push
只是用于修改浏览器的历史记录,而不会重新渲染组件。
要解决这个问题,可以使用react-router-dom
提供的Redirect
组件来实现重定向并同时更改状态。Redirect
组件会在渲染时自动重定向到指定的路径,并且会重新渲染组件,从而可以更改组件的状态。
以下是一个示例代码:
import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
const MyComponent = () => {
const [redirect, setRedirect] = useState(false);
const handleRedirect = () => {
setRedirect(true);
};
if (redirect) {
return <Redirect to="/new-path" />;
}
return (
<div>
<button onClick={handleRedirect}>Redirect</button>
</div>
);
};
export default MyComponent;
在上面的示例中,当点击按钮时,handleRedirect
函数会将redirect
状态设置为true
,然后Redirect
组件会自动重定向到/new-path
路径,并重新渲染组件。
这样就可以在使用重定向时同时更改组件的状态了。
领取专属 10元无门槛券
手把手带您无忧上云