Reactjs 如果在render（）中更改了路由，React router不会渲染任何内容

出于某种原因，我的路线只呈现了一半的时间——似乎是某种竞赛条件。它会打印出“OK”，但不会从routes中打印任何内容，甚至404也不会。非常清楚

如果删除加载位，它将始终按预期渲染开关块

有没有更好的/不同的方法

v4.2.0

  render() {
    const { hasInitialized } = this.props;
    if (!hasInitialized) {
      return (
        <div>Loading...</div>
      );
    }

    return (
      <div style={{ height: '100%', width: '100%' }}>
        <Helmet titleTemplate="%s - Resilient" defaultTitle="Resilient" />
        <div>OK</div>
        <Switch>
          <Redirect from="/" to="/auth/check" exact={true} />
          <Route path="/auth" component={AuthLayout} />

          <AuthenticatedRoute path="/x" component={AdminLayout} />
          <Route component={Miss404} />
        </Switch>
      </div>
    );
  }

render（）{
const{hasInitialized}=this.props；
如果（！hasInitialized）{
返回(
加载。。。
);
}
返回(
好啊
我多次阅读react router文档，其中关于的部分似乎很相关。但是，当我在
中放入调试器行时，位置和历史始终具有正确的信息，并且仍然没有任何路由会呈现

我仍然不明白问题出在哪里，但下面是我提出的解决方法。下面的代码包装了我的
组件，其中包含所有路由

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import LocalStorageManager from 'utils/LocalStorageManager';
import { selectCurrentUser, selectHasInitialized } from 'client/selectors/authSelectors';
import { setAccessToken, getProfile } from 'shared/api';
import { setHasInitialized, signIn } from 'modules/auth/actions.js';
import SinglePageCard from 'components/layout/SinglePageCard';

const mapStateToProps = (state) => {
  return {
    currentUser: selectCurrentUser(state),
    hasInitialized: selectHasInitialized(state),
  };
};

export default (WrappedComponent) => {
  class Layout extends Component {
    componentWillMount() {
      const accessToken = LocalStorageManager.getAccessToken();
      if (!accessToken) {
        this.props.setHasInitialized();
        return;
      }

      setAccessToken(accessToken);
      getProfile().then((response) => {
        console.log(response);
        const { user } = response.data.data;
        this.props.signIn(user);
      }).catch((error) => {
        console.log(error);
        this.props.setHasInitialized();
      });
    }

    render() {
      const { currentUser, hasInitialized, ...rest } = this.props;
      if (!hasInitialized) {
        return (
          <SinglePageCard>
            <div>Initializing...</div>
          </SinglePageCard>
        );
      }

      return (
        <WrappedComponent {...rest} />
      );
    }
  }
  return withRouter(connect(mapStateToProps, { setHasInitialized, signIn })(Layout));
};

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react router dom”导入{withRouter}；
从“utils/LocalStorageManager”导入LocalStorageManager；
从'client/selectors/authSelectors'导入{selectCurrentUser，selectHasInitialized}；
从“shared/api”导入{setAccessToken，getProfile}；
从'modules/auth/actions.js'导入{setHasInitialized，signIn}；
从“组件/布局/SinglePageCard”导入SinglePageCard；
常量mapStateToProps=（状态）=>{
返回{
currentUser：选择currentUser（状态），
hasInitialized：选择hasInitialized（状态），
};
};
导出默认值（WrappedComponent）=>{
类布局扩展组件{
组件willmount（）{
const accessToken=LocalStorageManager.getAccessToken（）；
如果（！accessToken）{
this.props.setHasInitialized（）；
返回；
}
setAccessToken（accessToken）；
getProfile（）。然后（（响应）=>{
控制台日志（响应）；
const{user}=response.data.data；
this.props.sign（用户）；
}).catch（（错误）=>{
console.log（错误）；
this.props.setHasInitialized（）；
});
}
render（）{
const{currentUser，hasInitialized，…rest}=this.props；
如果（！hasInitialized）{
返回(
正在初始化。。。
);
}
返回(
);
}
}
使用路由器返回（连接（MapStateTops，{setHasInitialized，signIn}）（布局））；
};
我多次阅读react router文档，其中关于的部分似乎很相关。但是，当我在
中放入调试器行时，位置和历史始终具有正确的信息，并且仍然没有任何路由会呈现

我仍然不明白问题出在哪里，但下面是我提出的解决方法。下面的代码包装了我的
组件，其中包含所有路由

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import LocalStorageManager from 'utils/LocalStorageManager';
import { selectCurrentUser, selectHasInitialized } from 'client/selectors/authSelectors';
import { setAccessToken, getProfile } from 'shared/api';
import { setHasInitialized, signIn } from 'modules/auth/actions.js';
import SinglePageCard from 'components/layout/SinglePageCard';

const mapStateToProps = (state) => {
  return {
    currentUser: selectCurrentUser(state),
    hasInitialized: selectHasInitialized(state),
  };
};

export default (WrappedComponent) => {
  class Layout extends Component {
    componentWillMount() {
      const accessToken = LocalStorageManager.getAccessToken();
      if (!accessToken) {
        this.props.setHasInitialized();
        return;
      }

      setAccessToken(accessToken);
      getProfile().then((response) => {
        console.log(response);
        const { user } = response.data.data;
        this.props.signIn(user);
      }).catch((error) => {
        console.log(error);
        this.props.setHasInitialized();
      });
    }

    render() {
      const { currentUser, hasInitialized, ...rest } = this.props;
      if (!hasInitialized) {
        return (
          <SinglePageCard>
            <div>Initializing...</div>
          </SinglePageCard>
        );
      }

      return (
        <WrappedComponent {...rest} />
      );
    }
  }
  return withRouter(connect(mapStateToProps, { setHasInitialized, signIn })(Layout));
};

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react router dom”导入{withRouter}；
从“utils/LocalStorageManager”导入LocalStorageManager；
从'client/selectors/authSelectors'导入{selectCurrentUser，selectHasInitialized}；
从“shared/api”导入{setAccessToken，getProfile}；
从'modules/auth/actions.js'导入{setHasInitialized，signIn}；
从“组件/布局/SinglePageCard”导入SinglePageCard；
常量mapStateToProps=（状态）=>{
返回{
currentUser：选择currentUser（状态），
hasInitialized：选择hasInitialized（状态），
};
};
导出默认值（WrappedComponent）=>{
类布局扩展组件{
组件willmount（）{
const accessToken=LocalStorageManager.getAccessToken（）；
如果（！accessToken）{
this.props.setHasInitialized（）；
返回；
}
setAccessToken（accessToken）；
getProfile（）。然后（（响应）=>{
控制台日志（响应）；
const{user}=response.data.data；
this.props.sign（用户）；
}).catch（（错误）=>{
console.log（错误）；
this.props.setHasInitialized（）；
});
}
render（）{
const{currentUser，hasInitialized，…rest}=this.props；
如果（！hasInitialized）{
返回(
正在初始化。。。
);
}
返回(
);
}
}
使用路由器返回（连接（MapStateTops，{setHasInitialized，signIn}）（布局））；
};
我不知道为什么你的代码不能正常工作，我觉得很好……但是你真的需要这个加载条件渲染吗？我在路由中没有看到需要外部数据的东西，但也许你故意忽略了它？我的意思是，你能把这个条件委托给路由到的一个组件吗？谢谢Jaxx。为了简单起见，我确实省略了一堆代码。我只是试图在任何事情发生之前通过一个获取调用加载用户。将此逻辑向下移动没有意义，因为它必须无处不在。我想我会尝试将它们反弹到处理身份验证的路由，然后将它们发送回，但我试图避免这样做，因为这有点奇怪一个蹩脚的用户体验。我已经尝试了很多类似于上面代码的方法，但react router似乎不支持在渲染中更改路由。找到了一个结合两种方法的解决方法。1）我创建了一个HOC，它封装了我所有的路由逻辑。2）我将我最初的历史更改逻辑从
componentDidMount
移动到
componentWillMount
。不知道为什么这样做会起作用，但很高兴能找到一个解决方法。Grats！如果有时间，你应该写一个详细的答案，说明你是如何做到的。不知道你的代码为什么不起作用t工作正常，对我来说很好…但是你真的需要这个加载条件渲染吗？我在路由中没有看到需要外部数据的东西，但也许你故意忽略了它？我的意思是，你能把这个条件委托给一个组件b吗