Реагировать на приватный маршрут без рендеринга компонента Login

Question

Я новичок в реакции 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));

Итак, вот что я хотел сделать, если пользователь не вошел в систему, то пользователь должен быть перенаправлен накомпонент входа в систему. В противном случае пользователь должен перенаправить на компоненты Landingscreen.Итак, я сделал следующим образом.

, но он добавляет /login в URL, но этот компонент не отображается.Итак, кто-нибудь может мне помочь с этим?

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

Я делаю это в действии, чтобы перенаправить пользователя.

Answer 1

Маршрут входа в систему должен быть общедоступным (не частным), поскольку это страница, через которую ваши пользователи могут аутентифицировать себя

По сути, заменить

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

с

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

Answer 2

Две вещи, которые вам нужно исправить,

Первое: маршрут входа не обязательно должен быть 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>
        )
    }
}