Question

我已经创建了一个带有基本示例的存储库，如果有帮助，该示例会触发此错误：

我正在尝试在通过react-router-dom 4.3.1，loadable-component 5.6.0和react-dom 16.8.1设置的SSR中使用可加载组件/ p>

这是我要应用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} />

但是在开发人员工具控制台中，我仍然收到以下警告：

警告：道具类型失败：提供给component的{{1}}类型的object无效道具Route

如果我使用first answer中建议的替代语法：

function

警告消失，但是单击链接时到<Route path="/about/" component={props => <About {...props} />} />的路由仍然给出错误：

/about

我遵循documentation的有关在SSR中设置Uncaught Error: Loading chunk About failed. (missing: http://localhost:3000/about/About.bundle.js) at HTMLScriptElement.onScriptComplete (VM1805 app.bundle.js:114)的信息，因此我已经按照指示设置了客户端，服务器以及babel插件。

有什么想法吗？

Answer 1

这是known issue of react router。

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

<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} />} />

带有可加载组件的React Router错误

3 个答案: