React中使用Auth0完成认证后如何跳转新组件，是否需要react-router-dom？

是否必须使用react-router-dom？ #

不需要。react-router-dom是实现前端单页应用无刷新路由切换的工具，如果你只有「登录前展示首页」「登录后展示业务页」的简单场景，完全可以不用引入该依赖。

不使用react-router-dom的两种实现方案 #

方案1：条件渲染（推荐，无刷新体验更好） #

你已经通过useAuth0钩子拿到了isAuthenticated认证状态，直接通过该状态控制要渲染的组件即可，注意需要额外判断isLoading状态，避免Auth0还在校验认证状态时出现页面闪跳：

import {Fragment, useEffect} from "react";
import "../css/AppLightMode.css";
import ButtonMode from "./ButtonMode";

// 引入Auth0
import { useAuth0 } from "@auth0/auth0-react";
import LogoutButton from "./Logout";
import Profile from "./Profile";
import AppPage from "./AppPage.js";


const MainPageLightMode = ()=>{
  const {loginWithRedirect, isAuthenticated, isLoading} = useAuth0();

  // Auth0状态校验中展示加载态
  if (isLoading) return <div>加载中...</div>
  // 认证通过直接渲染业务页组件
  if (isAuthenticated) return <AppPage />

  // 未认证时渲染登录首页
  return (
    <Fragment>
      <header className="container">
        <ButtonMode/>
        <div className="header-img row"> 
          <div className="left seven columns image u-max-full-width"></div>
          <div className="right five columns">
            <h1>用音乐学习语言</h1>
            <p>通过音乐MV，搭配你母语和目标语言的双语歌词来学习一门新语言</p>
            <div className="div-btn">
              <a className="btn-neu-for-lm btn-login btn " onClick={()=>loginWithRedirect() }><span>登录</span></a>
              <a className="btn-neu-for-lm btn-instructions btn" href="#" ><span>使用说明</span></a>
            </div>
          </div>
        </div>
      </header>
    </Fragment>
  )
}

export default MainPageLightMode;

方案2：原生地址跳转（适合服务端路由多页面场景） #

如果你需要修改地址栏路径、跳转到其他服务端渲染的页面，可以直接调用浏览器原生API实现：

useEffect(() => {
  // 认证完成后跳转到指定路径
  if (isAuthenticated) {
    window.location.href = '/你的业务页路径'
  }
}, [isAuthenticated])

注意事项 #

• 提前在Auth0后台的「Allowed Callback URLs」配置项中添加你认证完成后要跳转的地址，否则Auth0会拦截回调请求抛出错误
• 如果后续需要扩展多路由无刷新切换的能力，再引入react-router-dom即可，Auth0也提供了对应的路由守卫能力适配react-router。

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