React Redirect在登录后不工作
React Redirect是React框架中的一个组件，用于在用户登录后进行页面重定向。它可以帮助开发人员在用户完成登录操作后，将用户重定向到指定的页面。
React Redirect的使用非常简单，只需要在登录成功后，使用该组件将用户重定向到目标页面即可。以下是一个示例代码：
import React from 'react';
import { Redirect } from 'react-router-dom';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
loggedIn: false,
};
}
handleLogin = () => {
// 登录逻辑，验证用户名和密码等
// 登录成功后设置loggedIn为true
this.setState({ loggedIn: true });
}
render() {
if (this.state.loggedIn) {
return <Redirect to="/dashboard" />;
}
return (
<div>
{/* 登录表单 */}
<button onClick={this.handleLogin}>登录</button>
</div>
);
}
}
export default Login;在上述示例中，当用户点击登录按钮时，会调用handleLogin方法进行登录验证。如果登录成功，loggedIn状态会被设置为true，然后使用<Redirect>组件将用户重定向到/dashboard页面。
React Redirect的优势在于它能够简化开发人员处理页面重定向的过程，提高开发效率。它适用于各种Web应用程序，特别是需要在用户登录后进行页面跳转的场景。
腾讯云提供了一系列与React开发相关的产品和服务，例如腾讯云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库（TencentDB）等。您可以根据具体需求选择适合的产品进行开发和部署。
更多关于腾讯云产品的信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
react中的函数已登录，无法正常工作
reactjs
我开始学习和练习React，我的想法是制作一个登录屏幕，在那里我调用rest api并将用户存储在内存中，当登录时我将用户重定向到Home。问题是，我希望，如果用户登录，应该不能看登录屏幕。为此，我将"isLogged“状态发送到"login”组件，如果用户具有“login”状态，我希望将其重定向。问题是状态不正确： app.js import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'
浏览 10提问于2020-10-31得票数 2
回答已采纳
1回答
应该在redux/react路由器v4中更新组件吗？
reactjs、react-redux、react-router-v4
我正在把一个财产从我的“根”传递给我的反应路线，“家”。
当我的应用程序的“状态”(state.loggedIn)发生变化时，就会更新"Home“(外观会按预期发生变化)，但不会调用"shouldComponentUpdate”。
我想使用"shouldComponentUpdate“来检测一个属性("loggedIn")是否在根中改变，并做一些额外的工作。
// Root.js
import {Provider} from 'react-redux';
import {
BrowserRouter as Router,
Redi
浏览 1提问于2017-07-12得票数 0
回答已采纳
1回答
登录时的React刷新组件
javascript、reactjs
我有2个组件，NavBar，其中包含一个登录模式和‘主体’的页面。我想要检测用户何时登录并基于此重新呈现页面。当我使用第一个组件的模式登录时，如何更新第二个组件中的登录属性？ 为了保持简短，代码的简化版本如下： // NavBar.js export default class NavBar extends Component {
constructor(props) {
super(props)
this.initialState = {
username: "",
password: "",
logi
浏览 21提问于2019-05-18得票数 0
回答已采纳
1回答
我正在运行一个React前端应用程序，它检查用户当前是否登录到Rails API中。我使用componentDidMount检查然后相应地设置状态，但是当页面第一次加载并且用户登录时，所需的信息在页面上闪烁，然后应用程序呈现，状态回到初始状态。
这是我的代码：
import React, { Component } from "react";
import { Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Home from
浏览 1提问于2022-05-24得票数 0
回答已采纳
2回答
如何在单击时呈现另一个页面
reactjs
我使用的是Reactjs。我想在渲染主页面的同一位置上渲染另一个页面。下面是我的app.js文件的代码。
import React, { Component } from 'react';
import Online from './components/userview';
import Login from './components/login';
import './App.css';
class App extends Component {
constructor(props) {
super(props
浏览 4提问于2018-03-06得票数 0
2回答
如何在reactjs成功登录后打开首页？
reactjs、login、react-router
当登录成功时，它会将我重定向到主页，但当我转到浏览器并打开时，它会显示我的主页(实际上它必须将我扔到登录页面，因为我没有登录)。在我的情况下，我可以访问主页，而无需使用url登录。我应该怎么做才能将未登录的用户重定向到LogIn页面？
在我的LogIn.js中，我将loggedIn状态设置为false
App.js
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" componen
浏览 0提问于2019-02-15得票数 1
1回答
React路由器简要显示登录屏幕，然后在用户登录时重定向到仪表板。
reactjs、firebase、redux、firebase-authentication
我有一个登录页面，一个仪表板页面，还有一些其他页面。我在用火柴作为后端。我对登录组件执行了一个有条件的呈现，以检查用户是否已登录。(如果登录，则重定向到仪表板)。如果用户没有登录，我已经为仪表板和其他人使用了ProtectedRoutes重定向到登录页面。
当我在登录时重新加载仪表板页面或任何其他页面时，我会简要地看到Login组件，然后它执行firebase "auth.onAuthStateChanged“方法，并将登录状态设置为true，并将我重定向回仪表板。我确实理解为什么我会简单地看到登录页面，但我不知道如何解决这个问题。
import React, { useState
浏览 2提问于2020-12-07得票数 3
1回答
使用PrivateRoute进行React异步登录检查
javascript、reactjs、react-router
我想用异步LoginCheck在React中创建一个PrivateRoute。我已经尝试过了：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loggedIn: false
}
}
componentDidMount() {
//ASYNC FUNCTION
setTimeout(() => {
this.setState({loggedIn: true});
}, 1000)
}
render() {
console.log("RENDERED&#
浏览 17提问于2020-02-11得票数 0
回答已采纳
1回答
onBlur事件不允许链接单击注册
javascript、reactjs、events
我有一个带React-InstantSearch: <SearchBox />的导航栏，它为我提供了自动完成功能，还有一个onChange事件，它会触发显示建议框的事件。还有一个onBlur事件，当您离开搜索框并隐藏该框时会触发该事件。此onBlur事件阻止触发链接单击。(通过删除它进行验证)。有没有人对我如何纠正这个问题有什么建议？代码如下：
Relevant Portion of App.js
render() {
if (this.state.redirect) {
return (
<div className="App-c
浏览 41提问于2018-09-20得票数 0
1回答
我似乎不能让我的React私人路线工作
javascript、reactjs、react-router
我觉得这很简单，但我希望能有一些洞察力，因为我还是React的初学者。我有一个私有路由设置和一个来自App.js状态的authToken，它是通过props发送的。如果authToken为真，则私有路由应该转到/HomePage，但每次我使用有效凭据按下登录按钮时，它都会将我重定向到/login。 App.js import ReactDOM from 'react-dom';
import HomeNavBar from './HomeNavBar.js'
import Login from './Login.js'
import Regis
浏览 9提问于2020-04-02得票数 2
2回答
如何使用react-router有条件地重定向？
reactjs、react-router
我正在尝试从登录屏幕重定向到主屏幕。如何在ReactJS中正确实现条件重定向？ 我尝试重定向到基于状态的组件。this.state.loggedIn返回true或false，正如我所期望的那样。 import React from 'react';
import {Router,
Route,
Link,
Redirect
} from "react-router-dom";
import history from '../history';
import LoginView from './LoginView&
浏览 22提问于2019-03-24得票数 0
回答已采纳
1回答
React本机登录与React导航
reactjs、react-native、authentication、react-navigation、react-native-fbsdk
我有点挣扎，在我的反应本地应用程序的登录功能。我正在使用facebook登录，而且它正在工作。但是在成功登录后该做什么，这是我挣扎的地方。
我尝试过这样做:在App.js中有两个导航器。一个用于登录，另一个用于所有其他。在app.js中，我有一个默认为false的loggedIn状态。然后，当登录成功时，我希望将loggedIn状态更改为true，并将其切换到其他导航器。但是我无法从LoginStack导航器向App.js组件发送一个支柱，所以我无法在App.js中更改状态
这就是我现在的代码：
// App.js
const RootStack = createStackNavigator(
浏览 0提问于2018-07-04得票数 0
回答已采纳
1回答
如何在ReactJs中呈现嵌套路由
reactjs、react-router
我正在开发一个带有路由组件的ReactJS webapp应用程序。该网站有一个登录页面和一个仪表板。仪表板有一个肚脐和一个主要部分。
App.js
class App extends React.Component {
render() {
return (
<div style={{height: "100%"}} className="App">
<Router>
<Switch>
<Route p
浏览 3提问于2019-06-12得票数 0
回答已采纳
1回答
响应路由器专用路由，不从状态获得支持(例如身份验证状态)
reactjs、routes、react-router
我正在尝试实现一个私有路由组件来重定向未经身份验证的用户。问题是当我呈现像<PrivateRoute authenticated={this.state.isAuthenticated} path='/private' component={Panel} currentUser={this.state.currentUser}这样的组件时，私有路由将经过身份验证的用户重定向到登录页面，而不是转到面板。
在App.js中，我呈现所有路由，包括<PrivateRoute/>，并在ComponentDidMount()中设置currentUser和isAuthent
浏览 0提问于2019-06-22得票数 1
回答已采纳
1回答
登录后重定向到主页
reactjs、ruby-on-rails-5
在这里反应新手。我有一个使用react和rails构建的应用程序。在主页中有一个登录链接。这会将用户带到登录页面。在验证用户名是否存在时，我尝试使用以下代码重定向到主页。
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
isValid: false
};
this.h
浏览 0提问于2017-11-18得票数 0
2回答
如何将值传递给路由中的另一个组件？
reactjs、react-router
我有一个登录页面，它通过令牌进行身份验证，不久之后，输入的用户和密码将返回用户数据。在此之后，我将用户重定向到一个名为Dashboard的组件。但我想把他的数据传递给那个组件。
Index.js
在这里我有我创造的路线
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import So
浏览 0提问于2018-10-08得票数 0
1回答
反应错误->错误:超过最大更新深度
reactjs、typescript、react-router、react-hooks
早上好，我正在开发一个React应用程序，通过REST与后端通信。
应用程序体系结构还使用了React路由器，并使用服务器提供并存储在SessionStorage中的JWT令牌实现了身份验证功能。
基本上：
用户连接到应用程序，如果用户未登录，则重定向到登录页面，当登录页面被重定向到带有路径/entsorga/home的主页，该页面将显示带有路径/entsorga的组件和带有路径/entsorga/home的组件(如果了解app路由器的工作原理)<code>H 210</code><code>f 211</code>
通过应用程序的启动，用户被正
浏览 5提问于2021-03-23得票数 0
回答已采纳
1回答
反应反应路由器- privateRoute -无限循环
javascript、reactjs、react-router、infinite-loop
我试图在我的单页应用程序中建立一个简单的身份验证系统。我想禁用所有的路线，为客人摘录/login。了解用户是否经过身份验证或来宾的方法是知道localStorage中是否有一个localStorage。
当我启动应用程序时，Main组件就启动了。组件定义路由，并知道用户是否通过检查localStorage进行身份验证。
默认路由(/)用于呈现Home组件，但与 of react 一样，Home组件受PrivateRoute对象保护。
PrivateRoute对象检查用户是否经过身份验证。如果是，则呈现Home组件，否则用户将被重定向到/login上的login组件。
Login组件在成功的情况
浏览 1提问于2018-05-23得票数 2
回答已采纳
0回答
使用React组件进行Firebase登录
javascript、reactjs、firebase、firebase-authentication
其基本思想是在React中创建一个Firebase登录。
组件呈现自身，但它们不能协同工作。主要的问题是，在调用onAuthStateChanged()方法之后，呈现函数没有接受«new»状态。我做错了什么？
非常感谢大家！
var Login = React.createClass ({
getInitialState: function(){
return { loggedIn: 'false' };
},
handleLogIn: function(event){
var email = document.getEle
浏览 0提问于2016-07-06得票数 3
回答已采纳
1回答
Meteor - loginWithPassword在成功时什么也不做
javascript、reactjs、meteor、meteor-accounts
我正在尝试在Meteor和React框架中构建一个简单的登录表单。用户管理是在应用程序的其他地方完成的，所以我尝试使用Meteors的'loginWithPassword‘函数。
export default class Login extends React.Component{
constructor(props){
super(props);
}
render() {
return (
<div id="login">
<form method="POST" id=
浏览 0提问于2017-09-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
