如果在render（）

Question

出于某种原因，我的路线只有一半的时间 - 似乎是某种竞争条件。它打印出＆＃34; OK＆＃34;但是没有任何路线，甚至没有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>
    );
  }

https://github.com/ReactTraining/react-router/issues/5621

Answer 1

我多次阅读react-router文档，关于Blocked Updates的部分似乎很相关。但是，当我在<Layout />中放置调试器行时，位置和历史记录始终具有正确的信息，但仍然没有任何路由会呈现。

我仍然不明白这是什么问题，但这是我提出的解决方法。下面的代码包含了我的<Layout />组件，其中包含所有路由。

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