Javascript PrivateRouter在React JS中不起作用

我刚开始学英语。在我的项目中，我需要创建两个路由，一个用于用户身份验证，另一个需要重定向到登录页面

我用React路由器创建了这个结构。这是路线的集装箱：

export const history = createHistory();

class AppContainer extends Component {

componentDidMount(){
    this.props.checkUserExist();
}


render() {

    return (
        <Router history={history}>
            <Switch>
                <PrivateRoute path="/" component={Welcome} exact={true}/>
                <PrivateRoute path="/friends"  component={Friends}/>
                <PublicRoute path="/login"  component={Login}/>
                <PrivateRoute path="/loves" component={Loves}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </Router>
    );
}

}


  const mapDispatchToProps = (dispatch) => {
    return {    
     checkUserExist: () => dispatch(checkUser())     
    };
};

export default connect(undefined,mapDispatchToProps)(AppContainer);

和减速器：

const user = (state = {}, action) => {

switch (action.type) {

    case CHECKING_USER:

        return{
            ...state,
            ...action.payload
        };

    case USER_EXIST:

        return {
            ...state,
            ...action.payload
        };
    case USER_NOT_EXIST:

        return {
            ...state,
            ...action.payload
        };

    case USER_CHECKING_ERROR:
        return {
            ...state,
            ...action.payload
        }


    default:
        return state;
 }
};

export default user;

在Redux

最后，这是PrivateRoute的声明：

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


export const PrivateRoute = ({
     isAuthenticated, 
     component: Component, 
     ...rest 
    }) => (

    <Route {...rest} component={(props) => (
        isAuthenticated ? (
            <div><Component {...props} /></div>
        ) : (
            <Redirect to="/login" />
        )
    )}/>

);

const mapStateToProps = (state) => ({
    isAuthenticated: state.user.isAuth
});


export default connect (mapStateToProps)(PrivateRoute);

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


export const PublicRoute = ({
     isAuthenticated, 
     component: Component, 
     ...rest 
    }) => (

    <Route {...rest} component={(props) => (
        isAuthenticated ? (
            <Redirect to="/" />
        ) : (
            <Component {...props} />
        )
    )}/>

);

const mapStateToProps = (state) => ({
    isAuthenticated: state.user.isAuth
});


export default connect (mapStateToProps)(PublicRoute);

错误是这样的：例如，当您加载

'/friends'

时，它会先进入

登录

组件，然后进入

'/'

组件，因此在

欢迎

组件中。这可能是因为它在

checkUserExist（）

完成之前呈现

我的问题是：有没有办法避免它？可能使用超时或等待ajax调用完成

谢谢您的回答。

从“React”导入React；
import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';


export const PublicRoute = ({
     isAuthenticated, 
     component: Component, 
     ...rest 
    }) => {

    isAuthenticated ? localStorage.setItem("red", "") : localStorage.setItem(history.location.pathname) ;
    return (<Route {...rest} component={(props) => (
        isAuthenticated ? (
            <Redirect to="/" />
        ) : (
            <Component {...props} />
        )
    )}/>);

};

const mapStateToProps = (state) => ({
    isAuthenticated: state.user.isAuth
});


export default connect (mapStateToProps)(PublicRoute);


export const history = createHistory();

class AppContainer extends Component {

componentDidMount(){
    this.props.checkUserExist();
}

redirectMe = () => {
    const redirect= localStorage.getItem("red");
    localStorage.getItem("red", "");
    if(redirect !== "")
        return <Redirect to={redirect} />
}

render() {
    redirectMe()
    return (
        <Router history={history}>
            <Switch>
                <PrivateRoute path="/" component={Welcome} exact={true}/>
                <PrivateRoute path="/friends"  component={Friends}/>
                <PublicRoute path="/login"  component={Login}/>
                <PrivateRoute path="/loves" component={Loves}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </Router>
    );
}

}


  const mapDispatchToProps = (dispatch) => {
    return {    
     checkUserExist: () => dispatch(checkUser())     
    };
};

export default connect(undefined,mapDispatchToProps)(AppContainer);

从'react redux'导入{connect}；
从“react router dom”导入{Route，Redirect}；
导出常量PublicRoute=({
我得到了认证，
组件：组件，
休息
}) => {
isAuthenticated？localStorage.setItem（“红色”和“”）：localStorage.setItem（history.location.pathname）；
报税表（(
我被认证了(
) : (
)
)}/>);
};
常量mapStateToProps=（状态）=>({
isAuthenticated:state.user.isAuth
});
导出默认连接（MapStateTops）（PublicRoute）；
export const history=createHistory（）；
类AppContainer扩展组件{
componentDidMount（）{
this.props.checkUserExist（）；
}
重定向我=（）=>{
const redirect=localStorage.getItem（“红色”）；
getItem（“红色”和“”）；
如果（重定向！==“”）
返回
}
render（）{
重定向我（）
返回(
);
}
}
const mapDispatchToProps=（调度）=>{
返回{
checkUserExist:（）=>分派（checkUser（））
};
};
导出默认连接（未定义，mapDispatchToProps）（AppContainer）；

我做了什么

我在private route中添加了一个条件，即如果用户未经过身份验证并查找private route，则调用的url将存储在localstorage中

由于AppRouter每次都要呈现，因此它将检查本地存储，如果找到任何url，它将移动到该url并清除本地存储

注意：如果这不起作用，那么在状态中创建一个变量，并在AppRouter.js中连接该状态变量，而不是在localstorage中设置state

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


export const PublicRoute = ({
     isAuthenticated, 
     component: Component, 
     ...rest 
    }) => {

    isAuthenticated ? localStorage.setItem("red", "") : localStorage.setItem(history.location.pathname) ;
    return (<Route {...rest} component={(props) => (
        isAuthenticated ? (
            <Redirect to="/" />
        ) : (
            <Component {...props} />
        )
    )}/>);

};

const mapStateToProps = (state) => ({
    isAuthenticated: state.user.isAuth
});


export default connect (mapStateToProps)(PublicRoute);


export const history = createHistory();

class AppContainer extends Component {

componentDidMount(){
    this.props.checkUserExist();
}

redirectMe = () => {
    const redirect= localStorage.getItem("red");
    localStorage.getItem("red", "");
    if(redirect !== "")
        return <Redirect to={redirect} />
}

render() {
    redirectMe()
    return (
        <Router history={history}>
            <Switch>
                <PrivateRoute path="/" component={Welcome} exact={true}/>
                <PrivateRoute path="/friends"  component={Friends}/>
                <PublicRoute path="/login"  component={Login}/>
                <PrivateRoute path="/loves" component={Loves}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </Router>
    );
}

}


  const mapDispatchToProps = (dispatch) => {
    return {    
     checkUserExist: () => dispatch(checkUser())     
    };
};

export default connect(undefined,mapDispatchToProps)(AppContainer);