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

反应历史记录推送不呈现组件

1 个答案: