在反应路由器 6 中导航不会重定向到另一个页面答案

【问题标题】：Navigate in react router 6 doesn't redirect to another page在反应路由器 6 中导航不会重定向到另一个页面
【发布时间】：2022-01-20 19:20:27
【问题描述】：

我有一个带有注销按钮的组件。当我单击它时，功能注销有效，但不会将我重定向到登录页面。你能解释一下为什么会这样吗？

const Header = () => {

    const token = localStorage.getItem('token');
    const userName = useSelector(getUserSelector);
    const logout = async () => {
        const res = await axios.delete(url, {
            headers: {
                Authorization: token,
            },
        });
        if (res.status === 200) {
            localStorage.removeItem('token');

            <Navigate to='/login' />;
        } else {
            console.log(res);
        }

    };

    return (
        <header className='header'>
            <Logo className='header__logo' />
            {token && (
                <div className='header__description'>
                    <div className='header__user'>{userName || 'Admin'}</div>
                    <Button
                        className='header__button'
                        buttonName={LOGOUT_BUTTON}
                        onClick={logout}
                    />
                </div>
            )}
        </header>
    );
};

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您不能从回调中返回 JSX 并期望它像这样呈现。使用useNavigate 钩子并执行命令式导航。如果你想重定向，那么还要指定replace 选项。

const Header = () => {
  const navigate = useNavigate();

  const token = localStorage.getItem('token');
  const userName = useSelector(getUserSelector);

  const logout = async () => {
    const res = await axios.delete(url, {
      headers: {
        Authorization: token,
      },
    });
    if (res.status === 200) {
      localStorage.removeItem('token');

      navigate("/login", { replace: true });
    } else {
      console.log(res);
    }
  };

  return (
    ...
  );
};

【讨论】：

【解决方案2】：

这就是Navigate 组件。如果你想以编程方式导航，有一个钩子：

const token = localStorage.getItem("token");
const userName = useSelector(getUserSelector);
const navigate = useNavigate();

const logout = async () => {
  const res = await axios.delete(url, {
    headers: {
      Authorization: token,
    },
  });
  if (res.status === 200) {
    localStorage.removeItem("token");
    navigate("/login");
  } else {
    console.log(res);
  }
};

【讨论】：