反应私有路由不渲染登录组件

Question

我是React JS的新手。 我正在尝试实施私有路线概念。 所以，

Main.js

class Main extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            error: false,
            hasUserLogIn: false,
            dataFetched: false,
            isFetching: false,
        }
    }

    render() {
        const template =
            <Switch>
                <PrivateRoute exact path="/login" component={LoginComponent} />
                <PrivateRoute exact path="/QuizSetupMain" component={QuizSetupMain} />
                <PrivateRoute exact path="/" component={LandingScreen} />
            </Switch>
        return (
            <div>
              {template}
            </div>
        )
    }
}


function mapStateToProps(state) {
    return {
        hasUserLogIn: state.LoginReducer.hasUserLogIn,
        isFetching: state.LoginReducer.isFetching
    }
}

export default connect(mapStateToProps)(Main);

Privatecomponent.js

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

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => {
    return <Route
        {...rest}
        render={
            props => {
                return isAuthenticated ?
                    (
                        <Component {...props} />
                    )
                    :
                    (
                        <Redirect
                            to={{
                                pathname: "/login",
                                state: { from: props.location }
                            }}
                        />
                    )
            }
        }
    />
};

const mapStateToProps = state => (
    {
        // isAuthenticated  value is get from here
        isAuthenticated: state.LoginReducer.hasUserLogIn
    }
);


export default withRouter(connect(
    mapStateToProps, null, null, { pure: false }
)(PrivateRoute));

因此，我想做的是如果用户尚未登录，则应将用户重定向到登录组件，否则应将用户重定向到登录屏幕组件。 因此，我按照以下方式进行操作。

但它在网址中添加了/login ，但未呈现该组件。 那么，有人可以帮我吗？

export function sendUserJd(data, dispatch) {
    dispatch(setFlag());
    history.push('/');
    return {
        type: FETCHING_JOBDESCRIPTION_SUCCESS,
        data: data,
    }
}

我正在执行重定向用户的操作。

Answer 1

您需要纠正两件事：

第一：登录路由不必是PrivateRoute，因为未经身份验证的用户应该可以访问它。

第二：您需要使用父级组件中某个级别的提供者的Router包装路由

class Main extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            error: false,
            hasUserLogIn: false,
            dataFetched: false,
            isFetching: false,
        }
    }

    render() {
        const template =
            <Switch>
                <Route exact path="/login" component={LoginComponent} />
                <PrivateRoute exact path="/QuizSetupMain" component={QuizSetupMain} />
                <PrivateRoute exact path="/" component={LandingScreen} />
            </Switch>
        return (
            <BrowserRouter>
                <div>
                  {template}
                </div>
            </BrowserRouter>
        )
    }
}

Answer 2

登录路径必须是公共（而非私有），因为您的用户可以通过该页面进行身份验证

本质上，更换

<PrivateRoute exact path="/login" component={LoginComponent} />

与

<Route exact path='/login' component={LoginComponent} />