Javascript 不渲染组件的反应历史推送

我不熟悉

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>


        )

此状态将返回，因此如果您看到

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,
    }
}

---

因此，但它仍然不会呈现登录屏幕，也不会在登录后进入专用路径。有人能告诉我为什么会这样吗？谢谢。

由于您在更改

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

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>

从'path/to/history'导入{history}；

根据装载条件，你可以这样写

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

const PrivateRoute=（{component:component，isFetching，hasUserLogIn，path，…rest}）=>{
如果（正在获取）{
回来
}
返回hasUserLogIn？
(
)
:
(
)
};
您使用的是BrowserRouter，但是一个自定义的历史对象不能很好地同步您想让我将BrowserRouter更改为router吗？@ganesh，BrowserRouter路由并传入您在action Creator中使用的历史对象很多我将其更改为router及其工作，但有一件事是我对代码做了一点修改，这样我就可以在那里添加一个加载器。它是对的还是错的？你在哪里添加一个加载器，我没有得到你和一件事，在登录响应几秒钟后，我看到了登录页面，我被重定向到/route。有什么具体原因吗？
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 }
                        }}
                    />
                )
};