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

IT技术 reactjs react-router firebase-authentication react-redux
2021-05-01 12:04:56

如何根据"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')
    );

无法读取未定义的属性“props”

编辑 ：

Github 上的应用： React-Todo

2个回答

您无法使用，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内Route使用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')
    );

如果您使用的是 React 路由器，那么在您的状态下维护用户身份验证会更容易。

  { /* Protect your routes you can include any no.of routes */ }
  <Route onEnter={requireLogin}>
    <Route path='/todos' component={TodoApp}/>
  </Route>

接下来，为 requireLogin 编写一个小包装器，您可以在其中检查 auth 状态并在其中进行重定向。它看起来像这样

const requireLogin = (nextState, replace, cb) => {
            function checkAuth() {
             const user = firebase.auth().onAuthStateChanged(user => user); // check login in your state
              if (!user) {
                replace('/'); // make user to redirect to some route based on your requirement
              }
              cb(); //if user present in it fallback to here
            }
    };
其它你可能感兴趣的问题
上一篇根据props名称映射数组，ReactJS 下一篇状态为200，数据为空时，axios拦截器重试http请求