首页 > tools > webpack > > 正文

webpack4.x 与react-router2.x冲突,报错

发布人:zhoulujun@live.cn    点击:

webpack4 x router 回退到 "react-router ": "^2 8 1 ",发现报错,func 啥的,项目无法跑通

react-router v4 组件化思想,蛮好。但是升级后,发现,整个路由都要改

code split的 官方推荐模式:

Babel (e.g., to compile JSX to JavaScript) then you will need to use the @babel/plugin-syntax-dynamic-import plugin. This is a syntax-only plugin, meaning Babel won’t do any additional transformations. The plugin simply allows Babel to parse dynamic imports so webpack can bundle them as a code split. Your .babelrc should look something like this:{
  "presets": ["@babel/react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
react-loadable is a higher-order component for loading components with dynamic imports. It handles all sorts of edge cases automatically and makes code splitting simple! Here’s an example of how to use react-loadable:import Loadable from "react-loadable";
import Loading from "./Loading";

const LoadableComponent = Loadable({
  loader: () => import("./Dashboard"),
  loading: Loading
});

export default class LoadableDashboard extends React.Component {
  render() {
    return <LoadableComponent />;
  }
}

改造成本还是太大,所以,还是回退到"react-router": "^2.8.1",发现报错,func 啥的。