在加载Redux之前防止React-Router加载路由

Question

我的应用程序设置非常简单：

<Provider store={store}>
  <BrowserRouter>
    <App/>
  </BrowserRouter>
</Provider>

还有像

这样的路由器交换机

  <Switch>
    <Route path={'/test'} component={comp1}/>
    <Route exact path={'/'} component={comp2}/>
  </Switch>

我没有太多使用路由，但是我想在我的redux提取完成之前阻止这两个路由加载，但是我似乎无法使其正常工作。我试过检查是否在redux中加载了数据，基本上用

的检查包装了该开关

this.props.data.size > 0

但是它似乎仍然可以渲染。它们都使用相同的数据，因此，无论加载了哪条路由，我都应该能够只提取一次，这似乎是一种不好的做法，需要在两个组件中分别将数据提取到redux中。

Answer 1

您的一般想法checking if the data is loaded in redux似乎还可以，我唯一建议您将这种逻辑封装到包装器组件中：

export const CheckLoadedApp = (props) => this.props.data.lenght ? <App /> : 'Loading...';

并相应地更改您的代码库：

<Provider store={store}>
  <BrowserRouter>
    <CheckLoadedApp />
  </BrowserRouter>
</Provider>

但是，取决于您：）