首頁 > tools > webpack > > 正文

webpack4.x 與react-router2.x沖突,報錯

發布人:[email protected]    點擊:

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 啥的。