我是新手,仍在学习如何应对。我正在创建一个单页应用程序,如果用户未登录,则会将其重定向到登录页面。React 有一个重定向组件,但我不确定如何使用它。
以下是我的 app.js :-
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'
import './App.css';
class App extends Component {
state = {
loggedIn: false // user is not logged in
};
render() {
return (
<Switch>
<Route path="/protected" component={Protected}/>
<Route path="/login" component={Login}/>
</Switch>
);
}
}
export default App;
在上面的场景中,如果状态 loggedIn
为 false,我希望用户被重定向到 /login
页面,否则它应该转到 /protected
页面。
最佳答案
我通常会创建一个 PrivateRoute
组件来检查用户是否登录(通过 prop、redux、localstorage 或其他方式)。
类似于:
const PrivateRoute = ({ isLoggedIn, ...props }) =>
isLoggedIn
? <Route { ...props } />
: <Redirect to="/login" />
然后在路由器中我将它用于我的私有(private)路由:)
<Switch>
<PrivateRoute isLoggedIn={ this.state.loggedIn } path="/protected" component={Protected} />
<Route path="/login" component={Login}/>
</Switch>
关于javascript - 重定向到 React 路由器 4 中的登录页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54091535/