使用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; 

我可以點擊登錄並重定向到應用程序，但是當我刷新頁面時，在應用程序中，網址更改爲/登錄，但顯示仍在應用程序中。請幫忙。非常感謝

Answer 1

我通過創建元件並加載它在應用 這裏是我在代碼解決了這個問題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; 

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