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

问题描述：

如何根据"react-router": "^4.0.0"中的条件重定向到特定页面。如何根据React-Router 4中的条件重定向到特定页面

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') 
    );

无法读取的不确定

财产 '道具'

编辑：

在Github上的应用： React-Todo

答

由于您不在组件内部，因此不能使用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.createElement：类型无效 - 预期字符串（内置组件）或类/功能（复合组件）但得到：未定义。您可能忘记从您定义的文件中导出您的组件.' –

我编辑了我的答案，在我编辑从var（PrivateRoute）=（'./privateRoute'）之前导入privateRoute，，让我知道如果现在工作 –

我已经编辑它'从'privateRoute'导入{PrivateRoute};'但是得到以前的错误 –

答

如果您使用路由器的反应则可以更容易，如果你保持用户身份验证在你的状态。

{ /* 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 
      } 
    };

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

相关推荐