React BrowserRouter 不跳转默认路由 Auth0认证后未重定向至/chat

问题根因 #

• Auth0默认会跳转到你在控制台配置的「Allowed Callback URLs」地址，你当前配置的是localhost:8100，认证完成后不会自动跳转到/chat，需要手动配置登录成功后的跳转逻辑
• isAuthenticated是Auth0异步返回的状态，刚跳回根路径时状态还没更新为true，路由不会触发重定向逻辑

解决方案 #

1. 配置Auth0登录成功后的跳转逻辑
   在你项目中初始化Auth0Provider的位置，添加onRedirectCallback钩子手动跳转，示例代码如下：

import { Auth0Provider } from '@auth0/auth0-react';
import { useHistory } from 'react-router-dom';

const Auth0ProviderWithHistory = ({ children }) => {
  const history = useHistory();
  const domain = '你的Auth0域名';
  const clientId = '你的Auth0客户端ID';

  const onRedirectCallback = (appState) => {
    // 认证成功后直接跳转到/chat，也可自定义跳转至认证前用户访问的页面
    history.push(appState?.returnTo || '/chat');
  };

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};

2. 修正路由逻辑，补全未匹配路径的处理
   把你的路由逻辑外层包裹Switch，同时补充非登录态的全局重定向逻辑，修正后代码如下：

import { Switch, Route, Redirect } from 'react-router-dom';

// 路由部分代码
<Switch>
  {isAuthenticated ? (
    <>
      <Route exact path="/chat" component={ChatTab} />
      <Route exact path="/directory" component={DirectoryTab} />
      <Route exact path="/">
        <Redirect to="/chat" />
      </Route>
      {/* 登录态下其他路径统一跳转到chat */}
      <Route path="*">
        <Redirect to="/chat" />
      </Route>
    </>
  ) : (
    <>
      <Route exact path="/login" component={Login} />
      {/* 非登录态下所有路径统一跳转到login */}
      <Route path="*">
        <Redirect to="/login" />
      </Route>
    </>
  )}
</Switch>

3. 如果你是自定义webpack搭建的项目，确认开发服务器配置了history路由fallback：
   在webpack.config.js的devServer配置项中添加：

devServer: {
  historyApiFallback: true,
  port: 8100
}

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