18. React路由

1.React路由相关概念

1.1 SPA应用

1. 单页Web应用（simgle page web application , 简称 SPA）
2. 整个应用只有一个完整的页面
3. 点击页面中的链接不会刷新页面，只做页面局部更新
4. 数据都需要通过ajax请求获取，并在前端异步展现

1.2 路由Route的理解

1.2.1 什么是路由

1. 一个路由就是一个 key:value 映射关系
2. 在路由中，key指的是路径，value可以是一个方法function或者组件component

1.2.2 路由Route的分类

后端路由

1. 后端路由的value是function，用来处理客户端提交的请求
2. 注册路由：router.get(path,function(req,res))
3. 工作流程：当node收到一个请求，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据

前端路由

1. 浏览器端路由，value是组件component，用于展示页面内容
2. 注册路由：
3. 工作流程：当浏览器path为 /login ，当前的路由组件就会变成 Login组件

1.3 react-router-dom

1.3.1 react-router-dom是什么

1. react的一个插件库
2. 专门用来实现一个SPA应用
3. 基于react的项目基本都会用到这个库

1.3.2 react-router-dom相关API

内置组件

1. <BrowserRouter>

BrowserRouter是路由路径不带 #

2. <HashRouter>

HashRouter是路由路径带 #

3. <Route>

• path=“/login”
• component={组件名}

4. <Redirect>
5. <Link>
   如果不要有高亮效果，可以使用 <Link>
6. <NavLink>
   如果导航条需要高亮效果，使用<NavLink>
   并且配置一个属性值

   <NavLink activeClassName="样式属性" className="list-group-item">下载模块</NavLink>
   

7. <Switch>

• 假如有50个注册路由

<Route path="/demo01" component={
   Demo01}>
<Route path="/demo02" component={
   Demo02}>
<Route path="/demo03" component={
   Demo03}>
....
<Route path="/demo50" component={
   Demo50}>

• 在不使用Switch的时候，注册路由假如有50个
• 请求 http://localhost:3000/demo01
• 在运行的时候如果点击Demo01对应的NavLink,那么路由匹配到 /demo01，加载组件 Demo01，
• 然后继续匹配后面的路由组件，
• 这样导致的后果是效率低
• 所以要使用 Switch 这个内置组件，把所有注册的路由组件包括起来
• 代码如下

<Switch>
	<Route path="/demo01" component={
   Demo01}>
	<Route path="/demo02" component={
   Demo02}>
	<Route path="/demo03" component={
   Demo03}>
	....
	<Route path="/demo50" component={
   Demo50}>
	<Route path="/demo01" component={
   Demo0101}>
</Switch>

其他

1. history对象
2. match对象
3. withRouter函数

2.React路由的基本使用

2.1 安装react-router-dom

yarn add react-router-dom

2.2 路由的配置

<div classname="list-group">
	//在 路由器 BrowserRouter 中配置 路由链接 Link
	<BrowserRouter>
		<Link className="list-group-item" to="/test01"></Link>
		<Link className="list-group-item" to="/test02"></Link>
	</BrowserRouter>
</div>
...
<div className="panel">
	<div className="panel-body">
		<Route path="test01" component={
   组件名}/>
		<Route path="test02" component={
   组件名}/>
	</div>
</div>

浏览器地址栏的对应地址路径如下：
http://localhost:3000/test01
http://localhost:3000/test02

注意：
整个项目必须使用一个路由器，所以在src/index.js中使用路由器把App组件包裹住

ReactDOM.render(
    <BrowserRouter>
    	<App />
    </BrowserRouter>,
  document.getElementById('root')
);

2.3 路由组件和一般组件

路由组件

1. 使用<Router path="/路径名" component=“组件名”/>
2. 把所有路由组件单独放在一个文件夹内 src/path

一般组件

1. 程序员手动引入组件
2. 所有的一般组件单独放在一个文件夹内 src/component

2.4 路由组件和一般组件的最大区别

路由组件

路由组件可以接收到路由器自动传入的prop参数，这是路由组件和一般组件的最大区别

history

location

match

一般组件

一般组件接收的props，是手动传入的，传什么参数，props接收到的是什么参数

2.5 路由组件和一般组件的区别总结

写法不同

• 一般组件