React路由介绍

React：react-router-dom 详解

使用react构建单页面应用：

实现方法：
（1）react-router

（2）react-router-dom

react-router: 实现了路由的核心功能，而react-router-dom依赖react-router，

react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能：

Link组件，会渲染一个a标签；

BrowserRouter组件，使用pushState和popState事件构建路由；

HashRouter组件，使用window.location.hash和hashchange事件构建路由。

react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。

• 静态路由:

　然后我们在index.js中引入路由组件进行渲染：
　
我们可以使用a标签或Link组件进行路由的跳转，Link从react-router-dom引入；

• 动态路由传参：

第一种：
在组件的路由后面加/：id；

第一种：
　　隐式传参（通过函数跳转）：

HashRouter与BrowserRouter的异同

BrowserRouter 和 HashRouter
都可以实现前端路由的功能，区别是前者基于rul的pathname段，后者基于hash段。

前者：http://127.0.0.1:3000/article/num1

后者：http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）

这样的区别带来的直接问题就是当处于二级或多级路由状态时，刷新页面，会将当前路由发送到服务器（因为是pathname），而不会（因为是hash段）。