javascript - React历史推送不渲染组件

Question

我是 react js 的新手。我使用以下方式来实现 react 路线，

在主要组件中

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>


        )

私有(private)路由->

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 的属性，那么它也不会调用该 loader 。

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

所以，这里我想做的是，当用户未登录时将用户重定向到登录页面。之后，它应该被重定向到 / 主页。所以，我这样做是从，

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

所以，但它仍然没有渲染登陆屏幕，也没有在登录后进入私有(private)路线。谁能告诉我为什么会发生这种情况？谢谢。

Answer 1

由于您在更改路由的操作中使用自定义历史对象，因此您需要使用带有自定义历史对象的路由器，该对象您在 Action 创建者中使用。

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 }
                        }}
                    />
                )
};