React Router6 Navigate跳转问题

Question

题目描述

用 Router6 Navigate navigate('/');进行登陆后跳转，登陆成功，会把登陆返回的账号对应的角色存在 store 里，然后侧边栏菜单根据 store 里的角色进行动态显示。
现在问题是，登陆成功了也跳转进主页了，store里也正常存有角色了，但是菜单无法正常过滤

相关代码

登陆逻辑

  const login = async (values: any) => {
    try {
      const res:any = await loginApi(values);
      if (!res) return
      const { access_token } = res;
      setToken(access_token);
      dispatch(set({ token: access_token }));
      // 获取 token 里的 role
      const userInfo:Itoken = jwt_decode(access_token)
      // 把 role 存到 store
      dispatch(
        setUser({
          userInfo: {
            username: userInfo.username,
            role: userInfo.roles,
          },
        })
      );
      navigate('/', {replace: true});
    } catch (error) {
      console.log('err',error);
    }
  };

菜单过滤逻辑

export const FilterMenu = (routeList: RouteInf[]): RouteInf[] => {
  const { role } = store.getState().user;
  return routeList
    .map((item) => {
      if (item.role) {
        if (item.role.includes(role)) {
          return item;
        } else {
          item = {};
        }
      }
      if (item.children) {
        item.children = FilterMenu(item.children);
      }
      return item;
    })
    .filter((i) => JSON.stringify(i) !== '{}' && JSON.stringify(i) !== '[]');
};

如果把 navigate 换成 window.location.href 这样刷新跳转，就一点问题没有