使用react-router v4重定向到登錄頁面

Question

我是React的新手。

我想創建一個默認重定向到登錄的amdin應用程序（隱藏主菜單）。 使用react-router v4 ，基於此示例 ，默認情況下已顯示菜單。 這樣做的最佳做法是什么？ 這是我目前的代碼

在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;

我能夠點擊登錄並重定向到應用程序，但當我在應用程序中刷新頁面時，網址將更改為/ 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

Login.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;

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