Реагировать на толчок истории без рендеринга компонента

Question

Я новичок в react js.Я использую следующий способ для маршрута реакции,

В основном компоненте

render() {

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


        )

privateRoute ->

import React from 'react';
import { Route, Redirect, withRouter } from 'react-router';
import { connect } from 'react-redux';
import Loading from '../Loader/Loading';

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


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

Здесь после успешного входа в систему,

case LOGIN_SUCCESS:
            console.log("going in LOGIN_SUCCESS");
            return {
                ...state,
                hasUserLogIn: true,
                response: action.data,
                error: false,
                isFetching: true,
                loginRequest: false
            }

это состояние вернется, поэтому если вы видите, что isFetching - это свойство, которое я использую privateRoutes.js, то оно также не вызывает этот загрузчик.

export default connect(mapStateToProps, null)(PrivateRoute);

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

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

Итак, но тем не менее, он не рендерит экран посадки, а также не идет по частному маршруту после входа в систему.Кто-нибудь может сказать мне, почему это происходит?Спасибо.

Answer 1

Поскольку вы используете custom history object в действии для изменения Route, вам необходимо использовать Маршрутизатор с пользовательским history объектом, который вы используете в создателе действия.

import { history } from 'path/to/history';

<Router history={history}>
    <div>
        <Switch>
            <PrivateRoute exact path="/" component={ LandingScreen } />
            <PrivateRoute exact path="/QuizSetupMain" component={QuizSetupMain} />
            <Route exact path="/login" component={LoginComponent} />
        </Switch>
    </div>
</Router>

В соответствии с условиями загрузки, вы должны написать это как

const PrivateRoute = ({ component: Component, isFetching, hasUserLogIn, path, ...rest }) => {
    if(isFetching){
         return  <Loading /> 
    }
    return hasUserLogIn ?
                (
                    <Route
                       {...rest}
                       path={path}
                       component={Component}   
                     />
                )
                :
                (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: { from: path }
                        }}
                    />
                )
};