时间戳

首页 > 解决方案 > React Suspense 导致路由器道具未定义

javascript - React Suspense 导致路由器道具未定义

问题描述

我使用 Suspense 如下：

<Route
          path="/courses"
          render={() => (
            <Suspense fallback={HomePage}>
              <Courses />
            </Suspense>
          )}
        />

然后，在 Courses 组件上，我尝试按如下方式访问路由器道具：

<Link
            to={{
              pathname: this.props.match.url + "/" + course.id,
              search: "?title=" + course.title,
            }}
            key={course.id}
          >

但是，路由器道具变成了未定义的。在我尝试添加这个 React.lazy 加载之前，访问这些道具是可能的。

我想既然现在 Suspense 是加载的组件，它会接收所有路由道具并且不会将它们传递给我的组件，但这只是一个猜测。

为了解决这个问题，我还尝试了扩展运算符语法：例如<Courses {...props} />- 不起作用。

使用 React.lazy 时如何访问路由器道具？

提前致谢！

标签： javascriptreactjsreact-nativereact-router

解决方案

你需要传递props下来：

<Route
      path="/courses"
      render={(props) => (
        <Suspense fallback={HomePage}>
          <Courses {...props}/>
        </Suspense>
      )}
    />

或者使用withRouter HOC

对于功能组件，您可以使用useRouteMatch

推荐阅读