🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来React篇专栏内容:React-路由（一）
目录
1、介绍
2、路由的使用
2.1、相关组件
2.2、声明式导航
2.3、编程式导航
3、路由参数
1、介绍
React Router官网：Home v6.22.3 | React Router
使用用React Router前需要先进行安装：
npm i react-router-dom@5
React Router现在的主版本是5，思想：一切皆组件。
2、路由的使用
2.1、相关组件
如前面介绍里说的，自Router 4之后的思想是一切皆组件，所以在正式开始学习React路由前需要先对几个组件要有所掌握：
-
Router组件（别名，真实是不存在的，为了简写路由模式的组件名称）：包裹整个应用（单个具体的组件/根组件），一个React应用只需要使用一次
-
注意：在react中，不存在类似于vue的路由配置文件，对于前端路由模式的选择，我们可以通过该组件完成
-
Router类型： HashRouter和BrowserRouter
-
HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
-
BrowserRouter：使用H5的history API实现（localhost:3000/first）
-
-
区别：
-
两者在开发阶段，除了地址栏上的表现形式不一样以外，其它没区别
-
两者在生产阶段，hash路由可以直接上生产，无需做任何配置，而history模式则上生产需要配置的，配置服务器环境，否则项目是不能刷新的，一刷新会404
-
-
-
Link组件：用于指定导航链接（a标签）就是做声明式导航的（类似于vue中的
router-link组件）-
最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
-
-
Route组件：指定路由展示组件相关信息（组件渲染）【路由规则】{path: xx,component:xxx}
-
path属性：路由规则，这里需要跟Link组件里面to属性的值一致
-
component属性：展示的组件
-
语法：<Route path="路径" component={组件}></Route>
-
该组件除了具备定义路由规则功能外，还有类似于vue中
router-view的功能
-
各个组件之间的关系
注意：
Link和Route组件必须被Router组件给包裹，否则报错。
2.2、声明式导航
-
在
src/index.js文件中定义一个路由模式（可选，也可以在具体的某个组件中使用Router）
import React from "react";
import ReactDOM from "react-dom";
// 设置路由模式
import {HashRouter as Router} from 'react-router-dom'
// 定义 provider
import { Provider } from "react-redux";
import store from "./Store/index";
import App from "./App";
ReactDOM.render(<Provider store={store}>{/* 使用Router包裹根组件 */}<Router><App></App></Router></Provider>,document.getElementById("root")
);-
在根组件
src/App.js中引入路由相关组件（根据自身需要选择路由模式），并使用-
后续除了特殊的路由规则（嵌套路由）以外，其它普通的路由规则都需要在根组件中运用
-
import React, { Component } from "react";
import { HashRouter as Router, Route, Link } from "react-router-dom";
import Cmp10 from "./Components/Cmp10";
import Cmp11 from "./Components/Cmp11";
class App extends Component {render() {return (<Router><div><h1>导航区域</h1><div><ul><li><Link to="/home">首页</Link></li><li><Link to="/news">新闻</Link></li></ul></div></div><Route path="/home" component={Cmp10}></Route><Route path="/news" component={Cmp11}></Route></Router>);}
}
export default App;在写上述代码时注意，路由自带组件的顺序嵌套关系，组件<Link></Link>和组件<Route></Route>必须被组件<Router></Router>给包裹着。
需要注意：
刨除样式的影响，
Route组件在HTML代码中的位置决定了渲染后其在页面中显示的位置。如果Route放在最后，则其显示的时候也在最后；若其放在渲染内容的最前面，相应的显示也会在最开始。
2.3、编程式导航
react-router-dom中通过history对象中的push/go等方法实现编程式导航功能，这一点与之前的vue路由还是很相似的。
形如：
this.props.history.push({pathname: "/home",search: "from=404", // 表示传递查询字符串state: { // 隐式传参，地址栏不体现username: "admin",},
});
// 给定给定的数字（正数或负数）决定去往历史栈中的哪个地址，正数往未来，负数往过去
this.props.history.go(-1)
this.props.history.goBack(-1)请勿在根组件中写编程式导航，因为根组件默认是没有props对象，解决办法见后续。
3、路由参数
路由参数：在Route定义渲染组件时给定动态绑定的参数。
React路由传参方式有三种：
-
==动态路由参数（param）==
-
以“/film/detail/:id”形式传递的数据
-
在目标页面路由中传递
-
在落地组件中通过
this.props.match.params得到 -
一般用于restful规范下的开发
-
-
查询字符串（query）
-
通过地址栏中的
?key=value&key=value传递 -
在落地组件中通过
this.props.location.search得到 -
由于得到的数据是带“?”的，还需要进一步加工处理之后才能使用，因此建议少用或者不用
-
-
隐式传参（state），通过地址栏是观察不到的
-
不合适写在声明式导航中，写在编程式导航中更加合适
-
一般数用于埋点数据
-
简单的讲，埋点是将部分标记隐藏起来，等待用户去触发，因为这个事情不想让用户看到（需要做一些数据的收集，后续做分析），因此会使用隐式传参的方式（大数据分析）
-
-
在落地组件中通过
this.props.location.state得到
-
接收示例：
constructor(props){super(props)this.state = {// 接收动态路由参数news_id: this.props.match.params.id,// 接收查询字符串并处理query: querystring.parse(this.props.location.search.slice(1)),// 接收statestate: this.props.location.state};
}
