React中使用路由

先来看VUE里面怎么使用路由

Vue中的路由怎么使用：
1: cnpm i vue-router -S
2:创建路由的实例对象 const router= new VueRouter({routes:[]}) 【创建路由规则】
3:将new出来的 路由实例对象，挂载到VM的router属性上
4：在对应的组件中，使用 创建路由连接
5：在页面上放一个 【路由组件的容器】

总结：如果在框架中，要使用路由，一定要有 【路由规则，路由链接，呈现路由组件的容器】

---

React中使用路由：
1：运行cnpm i react-router-dom -S 安装依赖项

2：创建一个App.jsx根组件， 并在根组件中， 按需导入路由需要的三个组件
//Link 是路由链接
//Router是路由的规则
//HashRouter 表示路由的包裹容器； 在一个项目中， 只需要使用唯一的一次

import {HashRouter,Route,Link} from 'react-router-dom'

3: 在App.jsx中，render函数中， 最外层使用 HashRouter进行包裹

注意:HashRouter 必须用作 App 根组件最外层的元素
HashRouter 内部， 只允许放唯一一个元素 所以你想放多个的话外面要包一个div标签

render(){
 return <HashRouter> 
     <div>
<h1>大标题</h1>
    </di>
</HashRouter> 
}

4:在 需要的地方， 使用Link组件创建路由链接，其中， 通过to属性指定路由地址

<Link to="/home"></Link>

5:使用Route组件创建路由规则，同时注意：Route组件有两个身份： （path component）
1.路由规则
2.占位符（用来显示匹配到的组件）

import Home from ‘./components/Home.jsx’

Route有两个身份：

1：代表一个路由规则 2：表示一个路由匹配到的组件呈现的容器
1： path 表示要匹配的路由规则
2：component表示要展示的组件
3：exact精确匹配路由
注意：如果Route不设置 exact属性， 则默认为 模糊匹配的路由规则

路由获取参数：

路由中如果要获取参数，则需要使用 this.props.match.params.***

编程式导航：

通过 this.props.history对象提供的方法， 可以实现编程式导航：
1:this.props.history.go(n)前进或后退N个历史记录
2:this.props.history.goBack()后退一个历史记录
3：this.props.history.goForward()前进一个历史记录
4：this.props.history.push(‘url地址’) 跳转到哪个路由超链接中去

---

路由重定向:

1：按需导入 Redirect组件
import {HashRouter,Route,Link,Redirect} from ‘react-router-dom’

2：新建一个 路由规则
<Route exact path="/" render={() => } >
其中 exact 属性表示 精确匹配
path 表示 重定向之前的 路由规则
render 是一个函数，必须 为 render 属性绑定一个 function ，因此最佳实践 是提供一个 箭头函数
// 在 提供的 箭头函数中，需要return 一个组件， 其中， to属性为 重定向的路由

Switch 作用：
就是从上到下，依次匹配， 如果有一个成功了，就不会继续往下匹配了。
路由的特殊性： 参数越多 特殊性越低
如果路由规则，被Switch包裹了，则特殊性应该从高到底