React Router 5.0.0在Webpack生产构建中失败(不变失败:您不应在<router>之外使用<route>)

时间:2019-05-07 14:40:51

标签: javascript reactjs webpack react-router react-router-dom

我开始了一个新的宠物项目,设置webpack进行响应,以便更好地了解webpack的工作,我的目标是设置服务器端渲染和客户端渲染

开发模式下可以正常工作,但是在生产模式下,在服务器端渲染React元素时出现错误

不变式失败:您不应在<路由器>

之外使用路由

必须与webpack优化代码有关,但我无法指出

反应路由器4.2.0正常运行,但是使用反应路由器5.0.0则无法正常工作。 我尝试了其他解决方案,例如

  • 仅使用反应路由器
  • 从react-router import {StaticRouter} from "react-router"导入静态路由器

但没有任何效果,我在github上建立了一个仓库

https://github.com/RachitKalra/react-setup

只需安装节点依赖项,然后在开发模式下运行npm debug,在生产模式下运行npm start(导致错误)

预先感谢,我现在在这里停留了一段时间

Invariant failed: You should not use <Route> outside a <Router>
Error: Invariant failed: You should not use <Route> outside a <Router>
    at invariant (D:\Work\react-setup\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:13:11)
    at Object.children (D:\Work\react-setup\node_modules\react-router\cjs\react-router.js:454:21)
    at a.render (D:\Work\react-setup\www-start:310:64)
    at a.read (D:\Work\react-setup\www-start:307:58)

1 个答案:

答案 0 :(得分:0)

您的router-wrapper中正在从StaticRouter导入react-router-dom,但是此软件包不会导出StaticRouter

您必须从react-router导入它。

import { StaticRouter } from "react-router";
import { BrowserRouter } from "react-router-dom";