Question

我正在使用react-redux来改变我的应用程序中的状态。在我的路由器页面中，我如何基于conditions.ie，如果用户登录状态为true，那么如果我转到登录组件，它必须重定向到home组件和用户登录状态为false，如果我转到home组件，它必须重定向到登录组件。

routes.js

const routes=() => (
    <Router>
        <div>
            <Header />
                <Route exact path="/" render={ props =>  <div><FirstConnectedComponent /><SecondConnectedComponent /></div>} />
                <Route path="/login" component={ requireAuth(Login) } />
                <Route path="/register" component={ UserReg } />
                <Route path="/home" component={ Home } />
            <Footer />
        </div>
    </Router>

)
export default routes;

Answer 1

如何创建名为PrivateRoute

的新路径组件

<强> PrivateRoute.js

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

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        localStorage.getItem('authenticated')
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

<强> index.js

首先导入然后使用 -

<PrivateRoute path="/" component={MyComponent} />

Answer 2

您可以添加函数调用： onEnter={this.requireAuth.bind(this)}

功能可能是这样的：

requireAuth(nextState, replace) {
    if (this.user === undefined || this.user === null) {
        replace('/login');
    }
}

如何防止访问react js中的路由

2 个答案: