使用Auth0时，history/createBrowserHistory的history.replace无法正常工作

我之前跟着Auth0 React SPA指南开发时，也碰到过完全一样的坑！URL变了但页面纹丝不动，大概率是没有正确结合Auth0的状态处理和React Router的路由逻辑，下面是我踩坑后总结的几个解决方案：

1. 确保使用React Router提供的History实例 #

别自己手动import自定义的history文件！一定要在组件里通过useHistory钩子（React Router v5）获取官方的history对象：

import { useHistory } from 'react-router-dom';

// 在组件内部
const history = useHistory();
// 之后再调用 history.replace('/user')

如果用的是React Router v6，useHistory已经被useNavigate取代，写法要改成：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate('/user', { replace: true }); // 等价于v5的history.replace

2. 登录回调必须等Auth0处理完成再跳转 #

你的Callback组件里，一定要先执行handleRedirectCallback完成Auth0的状态更新，再执行跳转操作。如果提前跳转，Auth0的用户状态还没同步，路由守卫可能会拦截，或者页面不会重新渲染：

import React, { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useHistory } from 'react-router-dom';

const Callback = () => {
  const { handleRedirectCallback } = useAuth0();
  const history = useHistory();

  useEffect(() => {
    const finishLogin = async () => {
      // 先等Auth0处理回调，更新用户状态
      await handleRedirectCallback();
      // 状态更新完成后再跳转
      history.replace('/user');
    };

    finishLogin();
  }, [handleRedirectCallback, history]);

  return <div>登录中...</div>;
};

export default Callback;

3. 登出用Auth0的logout方法指定跳转，别手动改URL #

手动调用history.replace登出只会改URL，不会触发Auth0的状态重置，导致页面还是停留在原来的组件。正确的做法是用Auth0提供的logout方法，通过returnTo参数指定跳转地址：

import { useAuth0 } from '@auth0/auth0-react';

const LogoutButton = () => {
  const { logout } = useAuth0();

  const handleLogout = () => {
    logout({
      returnTo: `${window.location.origin}/user`
    });
  };

  return <button onClick={handleLogout}>登出</button>;
};

4. 检查路由守卫的状态处理 #

如果你的/user页面需要登录权限，路由守卫里一定要处理好Auth0的isLoading状态——在Auth0初始化完成前，不要急着跳转或渲染页面：

import { Route, Redirect } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';

const RequireAuth = ({ component: Component, ...rest }) => {
  const { isAuthenticated, isLoading } = useAuth0();

  // 初始化加载中时，显示加载状态，不要跳转
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

按这几点排查下来，应该就能解决URL变了但页面不跳转的问题了！

内容的提问来源于stack exchange，提问作者Taylor Austin