Question

我正在使用此软件包https://github.com/SimpleContacts/react-router-async-routes

<Route
    async
    path={`${match.url}app`}
    render={async () => {
      try {
        Promise.all([await Axios.get('/api/loggedin')]).then((userData) => {
          this.props.setUser(userData[0].data);
        });
        return <MainApp />
      } catch (err) {
        return <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />
      }
    }}
  /> //history.push not working on this one.
<Route path={`${match.url}somepage`} component={SomeComp} /> // history.push works

当我将React Router的history.push用于自定义异步路由/app时，URL更改，redux路由更改，但是未加载应用组件。它正在“正常”路线上工作。

我无法确定问题出在哪里。

有什么想法吗？

Answer 1

“ App Route”渲染道具回调方法中的“ await”语句位于错误的位置。在返回组件之前，它不会等待Promise.all解析。同样，您也可以在没有Promise.all的情况下编写代码，如下所示

<Route
    async
    path={`${match.url}app`}
    render={async () => {
      try {
        const userData = await Axios.get('/api/loggedin')
        this.props.setUser(userData.data);
        return <MainApp />
      } catch (err) {
        return <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />
      }
    }}
  /> //history.push not working on this one.
<Route path={`${match.url}somepage`} component={SomeComp} />

DEMO

PS确保您的API给您正确的响应，而不是降落在捕获区中

Answer 2

等待Promise.all，您应该会很好，但是正如其他人之前所说，它根本就不需要Promise.all（您在该数组中只有一个函数，因此可以将其完全抛弃。< / p>

IDL

无法使用history.push来异步路由，React JS

2 个答案: