一、react-router
- 要使用 react-router路由模块，先安装依赖包
yarn add react-router-dom - 导入路由模块
import { HashRouter, Route, Link } from 'react-router-dom'
- HashRouter 表示一个路由的跟容器，将来所有的路由相关的东西，都要包裹在 HashRouter 里面，而且一个网站中，只需要使用一次 HashRouter 就好了；
- Route 表示一个路由规则， 在 Route 上有两个比较重要的属性，
pathcomponent - Link 表示一个路由的链接 ，就好比 vue 中的
<router-link to=""></router-link>
- 在组件中启用路由，创建路由（Link创建的标签）以及路由规则（Route创建的标签，同时也是用来放匹配到的路由组件的占位符）
render() {
// 当 使用 HashRouter 把 App 根组件的元素包裹起来之后，网站就已经启用路由了
// 在一个 HashRouter 中，只能有唯一的一个根元素
// 在一个网站中，只需要使用 唯一的一次 <HashRouter></HashRouter> 就行了
return <HashRouter>
<div>
<h1>这是网站的APP根组件</h1>
<hr />
<Link to="/home">首页</Link>
<Link to="/movie/top250/10">电影</Link>
<Link to="/about">关于</Link>
<hr />
{/* Route 创建的标签，就是路由规则，其中 path 表示要匹配的路由，component 表示要展示的组件 */}
{/* 在 vue 中有个 router-view 的路由标签，专门用来放置，匹配到的路由组件的，但是，在 react-router 中，并没有类似于这样的标签，而是 ，直接把 Route 标签，当作的 坑（占位符） */}
{/* Route 具有两种身份：1. 它是一个路由匹配规则； 2. 它是 一个占位符，表示将来匹配到的组件都放到这个位置， 如果想让路由规则，进行精确匹配，可以为 Route，添加 exact 属性，表示启用精确匹配模式 */}
<Route path="/home" component={Home}></Route>
<hr />
{/* 注意：默认情况下，路由中的规则，是模糊匹配的，如果 路由可以部分匹配成功，就会展示这个路由对应的组件 */}
{/* 如果要匹配参数，可以在 匹配规则中，使用 : 修饰符，表示这个位置匹配到的是参数 */}
<Route path="/movie/:type/:id" component={Movie} exact></Route>
<hr />
<Route path="/about" component={About}></Route>
</div>
</HashRouter>
}
- 如何获取路由匹配到的参数
constructor(props) {
super(props)
this.state = {
routeParams: props.match.params
}
}
render() {
console.log(this);
// 如果想要从路由规则中，提取匹配到的参数，进行使用，可以使用 this.props.match.params.*** 来访问
return <div>
{/* Movie --- {this.props.match.params.type} --- {this.props.match.params.id} */}
Movie --- {this.state.routeParams.type} --- {this.state.routeParams.id}
</div>
}
二、Ant-Design UI组件框架
- 项目本地安装
npm install antd - 按需导入所需组件，比如日期选择
import { DatePicker } from 'antd' - 全局导入样式表（不推荐）
import 'antd/dist/antd.css';// or 'antd/dist/antd.less'
一般，我们使用的第三方UI组件的样式表文件，都是以 .css 结尾的，所以我们最好不要为 .css 后缀名的文件，启用模块化（webpack配置文件）；
我们推荐自己不要直接手写 .css 的文件，而是自己手写 scss 或 less 文件，这样，我们只需要为 scss 文件 或 less 文件启用模块化就好了
由于直接使用 Ant Design 的全部包，体积过大，所以建议大家使用按需导入，这样能减少 bundle.js 文件的体积。
- 使用 babel-plugin-import（推荐）
先装包npm i babel-plugin-import，然后在.babelrc中配置
// .babelrc or babel-loader option
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。
// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';
- 手动引入对应模块的js和css（or less）
import DatePicker from 'antd/es/date-picker'; // 加载 JS
import 'antd/es/date-picker/style/css'; // 加载 CSS
// import 'antd/es/date-picker/style'; // 加载 LESS
- 以标签形式使用
<DatePicker></DatePicker>
