react-router

利用react-router实现简单的页面跳转

yarn add react-router react-router-dom

生命周期详细图解，在这个项目里会用到两个钩子，一个是componentDidMount,整个项目初始化时做一次判断，另外一个是componentWillReceiveProps,当属性发生改变进入路由时做一次判断。

此项目是类似电商app的项目，所以整个项目的单位采用rem来处理。
在src文件夹下建一个名叫utils的文件夹用来放rem.js，再将rem.js引入到整个入口文件里

//在rem.js里写如下代码
function font (){
    document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75 + 'px'
}
font()
window.onresize = font
//这是我自己的写法，也可以用自己习惯的写法

//在入门文件index.js里引入
import './utils/rem'

//需要用到路由 所以引入路由，一个是HashRouter,一个是BrowserRouter，此项目采用后者
//在stack overflow上有两个路由区别的详细解释，总结一下就是
//HashRouter basically it uses the hash in the URL to render the component. Since I was building a static one-page website, I needed to use this.
//BrowserRouter, it uses HTML5 history API to render the component. The history can be modified via pushState and replaceState. More information can be found here
// import { HashRouter as Router } from 'react-router-dom'
import { BrowserRouter as Router } from 'react-router-dom'

//用Router把App组件包起来
ReactDOM.render(
    <Router>
        <App />
    </Router>
, document.getElementById('root'));

毕竟都信奉一切皆组件，所以我们把所有的模块都弄成组件，在src文件下再建一个pages文件夹用来放项目所有的页面分别有head,home,mine,cart,help,category,list,每个文件夹下都是index.js和index.css两个文件