文章参考链接：
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组件包含 页面的各个组件的整合和路由的组件的集合