reactjs - 用户在 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;
解决方案
推荐阅读
- angular - 离子组件在离子标签页中不起作用
- android - 启动 websockets 传输 android 时出错
- php - cURL Elasticsearch 价格比较搜索 aggs
- python - 压缩两个字符串列表以用作字典中的键
- ios - 将图像下载到 TableView [Swift]
- python - PyAudio 包未安装
- javascript - 提取对象中的名称键
- sirishortcuts - 未使用 NSUserActivity 为 Siri 快捷方式保存持久标识符
- reactjs - React - 您可以将状态处理程序向下传递到多个子组件层吗
- c# - 根据日期时间的天数增加和减少价格