首页 > 解决方案 > 用户在 React 上使用 Auth0 进行身份验证后如何重定向到新组件(页面)

问题描述

- 我在反应中使用 Auth0 进行身份验证,我想知道一旦用户通过了新组件的身份验证,我该如何重定向。

-我没有使用 react-router-dom ,我需要它吗?

-这张图片的主要部分是“onClick={()=>loginWithRedirect()”: 我使用的是“loginWithRedirect()”

这是我的代码:

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

//Importamos 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} = useAuth0();
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>Learn languages with music</h1>
        <p>Learn a new language with a video music and the lyrics in your native language and the language you are learning on </p>
       
        <div className="div-btn">
          {isAuthenticated ? <>
          <Profile/>
          <LogoutButton/>
          </> 
          : <a className="btn-neu-for-lm btn-login btn " onClick={()=>loginWithRedirect() }><span> Login</span></a>}
          
          <a className="btn-neu-for-lm btn-instructions btn" href="#" ><span>Instructions</span></a>
       
        </div>
      </div>

    </div>
  </header>

  </Fragment>


  )
}

export default MainPageLightMode;

标签: reactjsauthenticationredirectreact-routerauth0

解决方案


推荐阅读