带有可加载组件错误的反应路由器
Posted
技术标签:
【中文标题】带有可加载组件错误的反应路由器【英文标题】:React Router with Loadable Components error 【发布时间】:2019-07-03 17:33:03 【问题描述】:我已经创建了一个包含触发此错误的基本示例的存储库,以防有帮助:
loadable-components-s-s-r
我正在尝试在使用 react-router-dom
4.3.1
、loadable-component
5.6.0
和 react-dom
16.8.1
的 s-s-r 设置中使用可加载组件
这是我尝试应用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"));
并作为道具传递给同一App
组件中的Route
:
<Route path="/about/" component=About />
但我在开发者工具控制台中不断收到以下警告:
警告:失败的道具类型:提供给
Route
的object
类型的无效道具component
,应为function
如果我使用first answer 中建议的替代语法:
<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)
我遵循了documentation关于在s-s-r中设置loadable-components
的信息,所以我已经设置了客户端、服务器以及babel插件。
知道这里有什么问题吗?
【问题讨论】:
可能是react路由器的问题,试试:About
组件产生错误(在本例中为/about
):loadable.es.js:246 Uncaught Error: Loading chunk About failed.
你能解决这个问题吗?我遇到了同样的错误
很遗憾我没有,我可能会提供一个存储库的链接以便重现问题,以便更容易知道出了什么问题。
我认为在客户端渲染中应该没问题。错误可能是因为您没有正确配置 s-s-r。
【参考方案1】:
这是known issue of react router。
我认为您可以像这样编写路线:
<Route path="/about/" component=props => <About ...props /> />
请谨慎使用此实现,因为重新渲染可能会出现一些错误行为。
【讨论】:
修复了警告但路由(在此示例中为/about
)在使用此语法时仍然不起作用。
@rfc1484 你试过返回默认导入吗? import(“./About”).then(c => c.default)
返回同样的错误:Loading chunk About failed.
【参考方案2】:
你为什么不使用react.lazy?它是官方组件。
const About = React.lazy(() => import('./About')
<Route exact path="/about" component=props => <About ...props /> />
【讨论】:
React lazy 目前不支持服务端渲染:React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.
reactjs.org/docs/code-splitting.html【参考方案3】:
这是你的“关于”组件:
import React from "react";
const About = () => <h2>About</h2>;
export default About;
你没有返回 jsx。这就是您收到错误的原因。 这就是你应该返回 jsx 的方式。
const About = () => (<h2>About</h2>);
干杯!
【讨论】:
以上是关于带有可加载组件错误的反应路由器的主要内容,如果未能解决你的问题,请参考以下文章