React Router with Loadable Components错误

Question

我创建了一个存储库,其中包含一个基本示例,如果有帮助,会触发此错误:

可加载组件-SSR

我试图使用可装载组件的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 Tools控制台中不断收到以下警告:

警告:失败的道具类型:提供component的类型的无效道具,预期objectRoutefunction

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

<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

这是React router 的一个已知问题。

我认为你可以像这样编写路线：

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

请小心此实现，因为重新渲染可能会出现一些错误行为。