时间戳

首页 > 解决方案 > 重定向到反应路由器4中的登录页面

javascript - 重定向到反应路由器4中的登录页面

问题描述

我是新来的反应，仍在学习我的方式。我正在创建一个单页应用程序，如果用户没有登录，他将被重定向到登录页面。React 有一个 Redirect 组件，我不知道如何使用它。

以下是我的 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;

/login在上面的场景中，如果状态为假，我希望用户被重定向到页面loggedIn，否则它应该转到/protected页面。

标签： javascriptreactjsreact-router-v4react-router-dom

解决方案

我通常会创建一个PrivateRoute组件来检查用户是否已登录（通过 prop、redux、localstorage 或其他方式）。

就像是：

const PrivateRoute = ({ isLoggedIn, ...props }) =>
  isLoggedIn
    ? <Route { ...props } />
    : <Redirect to="/login" />

然后在路由器中，我将它用于我的私有路由:)

<Switch>
  <PrivateRoute isLoggedIn={ this.state.loggedIn } path="/protected" component={Protected} />
  <Route path="/login" component={Login}/>
</Switch>

推荐阅读