如何根据React-Router 4中的条件重定向到特定页面

Question

如何根据条件重定向到特定页面"react-router": "^4.0.0".

var { HashRouter, Route, Switch} = require('react-router-dom');
var {Provider}  = require('react-redux');
    firebase.auth().onAuthStateChanged((user) => {
      if (user){
        this.props.history.push('/todos/');
      }else{
        this.props.history.push('/');
      }
    });


    store.dispatch(actions.startAddTodos());

    ReactDOM.render(
      <Provider store = {store}>
        <div>
          <HashRouter>
            <div>
              <div className="columns medium-6 large-4 small-centered">
                <Switch>
                  <Route path='/todos' component={TodoApp}/>
                  <Route path='/login' component={Login}/>
                  <Route component={Login}/>
                </Switch>
              </div>
            </div>
          </HashRouter>
        </div>
      </Provider>,
      document.getElementById('app')
    );

---

无法读取undefined的属性'props'

---

编辑:

Github上的应用程序: React-Todo

Answer 1

您无法使用,this.props因为您不在组件内部.

因此,要执行重定向,您需要使用Redirect来自的组件react-router-dom

我建议你创建一个HOC(高阶组件来处理它).

import React from 'react'
import { Redirect, Route } from 'react-router-dom'
import firebase from 'firebase'

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

export default PrivateRoute

然后,您只需要在index.js文件中导入PrivateRoute,而不是将Routeuse PrivateRoute用于需要进行身份验证的路由.

var { HashRouter, Route, Switch} = require('react-router-dom');
var PrivateRoute = require('./privateRoute')
var { Provider }  = require('react-redux');

    store.dispatch(actions.startAddTodos());

    ReactDOM.render(
      <Provider store = {store}>
        <div>
          <HashRouter>
            <div>
              <div className="columns medium-6 large-4 small-centered">
                <Switch>
                  <PrivateRoute path='/todos' component={TodoApp}/>
                  <Route path='/login' component={Login}/>
                  <Route component={Login}/>
                </Switch>
              </div>
            </div>
          </HashRouter>
        </div>
      </Provider>,
      document.getElementById('app')
    );