react-router-dom

1. BrowserRouter 与 HashRouter最显著的区别是，HashRouter的URL中含#，例如：http://example.com/#/your/page

2. Link 与 NaviLink 在页面中都会以<a></a>的形式渲染出来。

<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>

NaviLink是一种特殊的Link, 当URL为to属性的值时，其style为activeClassName中指定的样式。

3. webpack内置就支持code splitting, 但要使用babel（将JSX编译为JavaScript）时，需安装 @babel/plugin-syntax-dynamic-import插件。

module.exports = {
    "presets": ["@babel/preset-react"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

使用@loadable/component：

import loadable from "@loadable/component";
import Loading from "./Loading.js";
// 动态加载
const LoadableLogin = loadable(() => import("./login.js"), {
  fallback: <Loading />   // 加载时显示的组件
});

//在react-router中使用
<Route path="/" component={loadableLogin}></Route>

标签：loadable,dom,babel,dynamic,syntax,react,import,router
来源： https://www.cnblogs.com/ceceliahappycoding/p/12416068.html