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>

 

上一篇:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server versio


下一篇:【菜鸟记录学习中遇到的问题】[Python篇]invalid syntax报错原因