我正在尝试使用React,React Router和Webpack库构建一个webapp,并利用服务器端渲染。
现在,我有一个基本结构工作 - 当我访问URL时,页面在服务器上呈现,发送回客户端,其中React确认客户端呈现的输出与生成的内容相匹配在服务器上并从那里接管。
我的问题是当我尝试打开必须异步加载组件的URL时。
当我访问一个必须异步加载依赖项的URL时,服务器会呈现包含所有依赖项的输出,但是当它涉及到客户端时,React呈现的标记不包含异步加载的组件,因此不同于服务器和我在控制台中出现错误
警告:React尝试在容器中重用标记,但校验和无效。
我认为解决方案的方法是要么不在服务器上渲染异步加载的组件,要么失去服务器端渲染的好处,要么以某种方式告诉React忽略服务器和客户端之间的差异,而不是丢弃服务器的标记,因为我知道最终会加载该组件并且标记将匹配。
有没有其他人遇到过这个问题并且知道什么是好的解决方案?
答案 0 :(得分:1)
您还需要在客户端运行match
以加载所有路由组件。
https://github.com/rackt/example-react-router-server-rendering-lazy-routes有一个充实的例子。