使用可加载组件错误响应路由器

Question

我创建了一个存储库，其中包含一个基本示例，该示例将触发此错误，以防有帮助：

可装载部件.ssr

我试图在react-router-dom 4.3.1、loadable-component 5.6.0和react-dom 16.8.1的基础上使用可加载的组件

下面是一个组件示例，我正在尝试将loadable-component应用于其中

import React from "react";

const About = () => <h2>About</h2>;

export default About;

在App组件中导入如下所示：

import loadable from "@loadable/component";
...
const About = loadable(() => import("./About"));

并在同一个Route组件中作为支柱传递给App：

<Route path="/about/" component={About} />

但是，我一直在Developer控制台中得到以下警告：

警告:错误的道具类型:无效的支柱component类型object提供给Route，预期function

如果我使用第一个答案中建议的替代语法

<Route path="/about/" component={props => <About {...props} />} />

警告消失，但当单击链接时，到/about的路由仍然会出现错误：

Uncaught Error: Loading chunk About failed.
(missing: http://localhost:3000/about/About.bundle.js)
    at HTMLScriptElement.onScriptComplete (VM1805 app.bundle.js:114)

我遵循了关于在SSR中设置文档的loadable-components，所以我已经设置了客户机、服务器以及babel插件。

知道这是怎么回事吗？

Answer 1

这是一个反应路由器的已知问题。

我想你可以这样编码路线：

<Route path="/about/" component={props => <About {...props} />} />

注意这个实现，因为在重新呈现时您可能会有一些错误行为。

Answer 2

这是您的“关于”组件：

import React from "react";

const About = () => <h2>About</h2>;

export default About;

你不能返回jsx。这就是你犯错误的原因。

这是您应该如何返回jsx的。

 const About = () => (<h2>About</h2>);

干杯!

Answer 3

你为什么不使用react.lazy呢？它是官方的组成部分。

const About = React.lazy(() => import('./About')
<Route exact path="/about" component={props => <About {...props} />} />