react-router简易入门

文章参考链接：
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

---

路由

存在与l两种组件
主要用来管理 动态请求（推荐用BrowerRouter)
主要用于静态网站

---

渲染

路由器只能渲染一个元素，创建一个组件来组合渲染其余的组件

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  
    
  
), document.getElementById('root'))

可以自由组合组合
example

// this component will be rendered by our <___Router>
const App = () => (
  

    

    

  
)

---

路由（Route）

可以根据URL的路径名来进行渲染

是如何渲染的

分析：path和url匹配成功后，路由确定渲染的参数有三种

• component：返回一个react组件
• render:返回react element的函数，匹配成功后会调用该函数
• children：

//component

const extraProps = { color: 'red' }

//render
 (
  
)}/>

//childern
 (
  props.match
    ? 
    : 
)}/>

---

实例分析：

参考地址为：https://blog.pusher.com/getting-started-with-react-router-v4/

1.系统的入口文件index.js 代码如下

39833535-7B08-4A26-92FD-D51E63A31499.png

对于红色框中的理解 用来进行渲染
组件来对真个页面的组件的组合
2.对应的文件为App.js

24F0B342-0AE1-4561-8A05-3C6737FBB320.png

红色框中有两个组件： 导航组件和

导航组件
效果如下：

69BF4FDF-E4E3-420F-A6E6-5F9DEFFCECDF.png

总结思路是：在入口文件index.js入口文件中需要用
BrowserRouter来对APP组件进行渲染
APP组件包含 页面的各个组件的整合和路由的组件的集合