问题：当用户已经在 /home 页面时，调用 history.push('/home') 并不会引发页面刷新。要解决这个问题，可以采取以下几种策略来确保页面刷新，即使用户已经在目标页面上。
使用 window.location.reload()
一个简单的方法是在登录成功后强制刷新页面，不管用户是否已经在目标页面。你可以通过检查当前路径来决定是否刷新页面：
1
2
3
4
5
6
7
8
9
10
11
12
|
import { history } from 'umi';
const loginSuccess = () => {
// 登录成功逻辑
// 检查当前路径，如果已经是目标页面则直接刷新
if (window.location.pathname !== '/home') {
history.push('/home');
} else {
window.location.reload(); // 强制刷新页面
}
};
|
这样，如果用户已经在 /home 页面，history.push('/home') 不会做任何操作，但会通过 window.location.reload() 强制刷新页面。
使用 history.replace() 代替 push()
如果你想避免在浏览器历史记录中多次添加相同的路径，可以使用 history.replace()，它会替换掉当前页面的记录而不会添加新记录。
1
2
3
4
5
6
7
8
9
10
11
|
import { history } from 'umi';
const loginSuccess = () => {
// 登录成功逻辑
// 检查当前路径，如果已经在 /home 页面，不做任何跳转，直接刷新
if (window.location.pathname === '/home') {
window.location.reload(); // 强制刷新页面
} else {
history.replace('/home'); // 如果不在 /home 页面，跳转并替换历史记录
}
};
|
使用 history.push() 后手动刷新
另一种方法是始终使用 history.push() 跳转到目标页面，然后通过 setTimeout 延迟调用 window.location.reload()，确保页面状态更新后再进行刷新。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import { history } from 'umi';
const loginSuccess = () => {
// 登录成功逻辑
// 先跳转到目标页面
history.push('/home');
// 延迟刷新页面，确保页面跳转完成
setTimeout(() => {
window.location.reload(); // 刷新页面
}, 100);
};
|
结合 useEffect 监听路由变化（如果你使用 React 路由）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import { useEffect } from 'react';
import { history } from 'umi';
const LoginPage = () => {
useEffect(() => {
const user = localStorage.getItem('user');
if (user) {
if (window.location.pathname !== '/home') {
history.push('/home');
} else {
window.location.reload();
}
}
}, []);
return <div>{/* 登录表单 */}</div>;
};
|