文章参考链接：
https://segmentfault.com/a/1190000010174260#articleHeader14
http://www.kindemh.cn/post/19
https://blog.pusher.com/getting-started-with-react-router-v4/
React Router 4 简易入门
安装
React Router 有三个包：
- react-router ,
- react-router-dom
- react-router-native
npm安装：
npm install --save react-router-dom
路由
存在<BrowserRouter>与<HashRouter>l两种组件
<BrowserRouter>主要用来管理 动态请求（推荐用BrowerRouter)
<HashRouter> 主要用于静态网站
渲染<Router>
路由器只能渲染一个元素，创建一个<App>组件来组合渲染其余的组件
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'))
<App>
<App>可以自由组合组合
example
// this component will be rendered by our <___Router>
const App = () => (
<div>
<Header />
<Main />
</div>
)
路由（Route）
<Route>可以根据URL的路径名来进行渲染
<Route>是如何渲染的
分析：path和url匹配成功后，路由确定渲染的参数有三种
- component：返回一个react组件
- render:返回react element的函数，匹配成功后会调用该函数
- children：
//component
<Route path='/page' component={Page} />
const extraProps = { color: 'red' }
//render
<Route path='/page' render={(props) => (
<Page {...props} data={extraProps}/>
)}/>
//childern
<Route path='/page' children={(props) => (
props.match
? <Page {...props}/>
: <EmptyPage {...props}/>
)}/>
实例分析：
参考地址为：https://blog.pusher.com/getting-started-with-react-router-v4/
1.系统的入口文件index.js 代码如下
39833535-7B08-4A26-92FD-D51E63A31499.png
对于红色框中的理解 用<BroserRouter>来进行渲染
<App/>组件来对真个页面的组件的组合
2.<App/>对应的文件为App.js
24F0B342-0AE1-4561-8A05-3C6737FBB320.png
红色框中有两个组件：<Navigation/>导航组件和<Main/>导航组件
效果如下：
69BF4FDF-E4E3-420F-A6E6-5F9DEFFCECDF.png
总结思路是：在入口文件index.js入口文件中需要用
BrowserRouter来对APP组件进行渲染
APP组件包含 页面的各个组件的整合和路由的组件的集合
