一个react项目的从无到有——router4.0配置（多页面结构）

公司官网，小项目，耗时短，为了更好的说明各部分需要注意的地方，也因为篇幅过长，影响阅读体验，请允许在下的多情，就按实际的开发过程，拆分成了“脚手架搭建（基础）”、“router4.0配置（多页面结构）”、“页面效果实现”、“添加百度地图（自定义）”、“打包发布（结束）”这几个部分，分篇发布。

进入项目目录，安装react-router-dom

npm install react-router-dom --save
所有安装成功的包都可以在package.json里面查看版本

页面引入方式

说明：我这里为什么选择安装react-router-dom，而不是react-router，原因只有一个，那就是——方便！
react-router React Router 核心
react-router-dom 用于 DOM 绑定的 React Router
两个只要用一个就行了，不同之处就是后者比前者多出了<Link> <BrowserRouter>这样的 DOM 类组件，所以只要引入react-router-dom就可以了

import { HashRouter, BrowserRouter, Link } from 'react-router-dom';

HashRouter与BrowserRouter的使用

假设点击一个<Link to="/news">新闻中心</Link>，这两者表现出来的url区别：

• HashRouter： http://localhost:8080/#/news
  而hash 地址就是指#号后面的url，即window.location.hash
• BrowserRouter： http://localhost:8080/news
  获取url方法为window.location即可

建议使用 HashRouter。因为如果使用BrowserRouter的话，如果页面从/news切换到/about之后，F5刷新页面会报错。

路由-Route的使用

匹配某个路径的时候绘制一个组件。Route 组件的 path 属性和当前地址的 pathname 进行匹配，如果匹配则渲染当前路由组件的内容，如果不匹配则渲染 null。

注意：没有提供 path 属性的 Route组件将总是匹配。

Route的属性：
path：字符串类型，它的值就是用来匹配url的。
component：它的值是一个组件。在path匹配成功之后会绘制这个组件。
exact：这个属性用来指明这个路由是不是排他的匹配，即是否精确匹配。
strict：这个属性指明路径只匹配以斜线结尾的路径。

可以在path路径里添加参数，根据匹配参数进行重定向，用this.props.match.params获取url传过来的参数。

<Route exact path="/news/:id" component={News}/>

componentDidMount() {
    console.log(this.props.match.params);
}

路由-Switch的使用

用于给Route组件分组，选出第一个匹配的<Rout>来渲染，避免多个<Rout>匹配成功且都渲染的情况。

import { Switch, Route } from 'react-router-dom';

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/news' component={News} />
  <Route exact path='/news/news_show/:id' component={NewsShow} />
  <Route component={NoMatch} />
</Switch>

路由-Link的使用

用于为应用提供链接，实现不同页面之间跳转，作用相当于<a>标签。
但是<a>会重新加载整个页面，而<link>只会重新加载页面里和当前url可以匹配的部分，也就是局部加载。

import { Link } from 'react-router-dom';

<Link to='/'>Home</Link>
<Link to={{
  pathname: '/me',
  search: '?sort=asc',
  hash: '#hash',
  state: { fromHome: true }
}} />