javascript - 使用 react-router v4 重定向到登录页面

Question

我是 React 的新手。

我想创建一个默认重定向到登录的 amdin 应用程序(主菜单是隐藏的)。使用 react-router v4，基于此 sample菜单已经默认显示。这样做的最佳做法是什么？这是我当前的代码

在 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter,
  Route,
  Switch
} from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import App from './App';
import Login from './modules/Login';

ReactDOM.render((
    <BrowserRouter history={createHistory}>
        <Switch>
            <Route path="/login" component={Login} />
            <Route path="/" component={App} />
        </Switch>
    </BrowserRouter>
    ), document.getElementById('root'));
registerServiceWorker();

在app.js

import React from 'react'
import {
  BrowserRouter,
  Link,
  Switch,
  Route,
  Redirect
} from 'react-router-dom'
import { routes } from './router-config'
import Login from './modules/Login'
import fakeAuth from './Auth'

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
        <Component {...props}/>
      ) : (
        <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }} />
      )
  )} />
);

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/protected">Protected</Link></li>
      </ul>

      <Switch>
      {routes.map((route,index) => (
        <PrivateRoute key={index} path={route.pattern} component={route.component} exact={route.exactly} />
      ))}
      </Switch>

    </div>
   </BrowserRouter>
)

export default App

在login.js

import React, { Component } from 'react'
import {
  Redirect
} from 'react-router-dom'
import fakeAuth from '../Auth'
import App from '../App'

class Login extends Component {
  state = {
    redirectToReferrer: false
  }

  login = () => {
    fakeAuth.authenticate(() => {
      this.setState({ redirectToReferrer: true })
    })
  }

  render() {
    const { from } = this.props.location.state || { from: { pathname: '/' } }
    const { redirectToReferrer } = this.state

    if (fakeAuth.isAuthenticated) {
      return (
        <Redirect to={"/"}/>
      )
    }

    return (
      <div>
        <p>You must log in to view the page at {from.pathname}</p>
        <button onClick={this.login}>Log in</button>
      </div>
    )
  }
}

export default Login;

我可以点击登录并重定向到应用程序，但是当我在应用程序中刷新页面时，url 更改为/login 但显示仍在应用程序中。请帮忙。非常感谢

Answer 1

我通过创建组件并将其加载到 App 中解决了这个问题 这是我在 app.js 中的代码:

import React from 'react'
import {
  BrowserRouter,
  Link,
  Switch,
  Route,
  Redirect,
  withRouter
} from 'react-router-dom'
import { routes } from './router-config'
import Login from './modules/Login'
import fakeAuth from './Auth'
import About from './modules/About'
import Protected from './modules/Protected'
import './App.css';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

const AuthButton = withRouter(({ history }) => (
  fakeAuth.isAuthenticated ? (
    <div>
      Welcome! <button onClick={() => {
        fakeAuth.signout(() => history.push('/login'))
      }}>Sign out</button>
      <ul>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/protected">Protected Page</Link></li>
      </ul>
    </div>
  ) : (
    <Redirect to={{
        pathname: '/login'
      }}/>
  )
))

const App = () => (
  <BrowserRouter>
    <div>
      <AuthButton/>
      <Route path="/login" component={Login}/>
      <PrivateRoute path="/about" component={About}/>
      <PrivateRoute path="/protected" component={Protected}/>
    </div>
  </BrowserRouter>
)

export default App

登录.js

import React, { Component } from 'react'
import {
  Redirect
} from 'react-router-dom'
import fakeAuth from '../Auth'

class Login extends React.Component {
  state = {
    redirectToReferrer: false
  }

  login = () => {
    fakeAuth.authenticate(() => {
      this.setState({ redirectToReferrer: true })
    })
  }

  render() {
    const { from } = this.props.location.state || { from: { pathname: '/' } }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer) {
      return (
        <Redirect to={from}/>
      )
    }

    return (
      <div>
        <p>Please Login</p>
        <div>

        </div>
        <Button onClick={this.login} type="primary">Log in</Button>
      </div>
    )
  }
}

export default Login;

我真的不知道这是否是最好的方法。