React 学习笔记 day 6

React路由

SPA应用

Single Page Web Application 简称SPA应用——单页Web应用，整个应用只有一个完整的页面，点击页面中的链接不会刷新页面，只会做页面的局部更新；数据都需要通过ajax请求获取，并在前端异步展现。

路由的理解

什么是路由？

1. 一个路由就是一个映射关系（key:value）
2. key为路径，value 可能是 function 或 component

路由分类

后端路由

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

前端路由 

• 浏览器端路由，value 是 component，用于展示页面内容
• 注册路由：<Route path="/test" component={Test}>
• 工作过程：当浏览器的path变为 /test时，当前路由组件就会变成Test组件 

路由的基本使用

1.  明确界面中的导航区、展示区

2. 导航区的a标签改为Link标签：<Link to="/xxxxx">Demo</Link>

3. 展示区写Route标签进行路径的匹配：<Route path='/xxxx' component={Demo}/>

4. <App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

路由组件与一般组件

	一般组件	路由组件
写法	<Demo/>	<Route path='/demo' component={Demo}>
存放位置	components	pages
props	写的时候传递了什么，就接收到什么	三个固定的属性（history、location、match）

Switch的使用

1. 通常情况下，path和component是一一对应的关系

2. Switch可以提高路由匹配效率（单一匹配） 

解决多级路径刷新页面样式丢失的问题

1. public/index.html 中 引入样式时不写 ./ 写 /（常用）
2. public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL%（常用）
3. 使用HashRouter

嵌套路由

1. 注册子路由时要写上父路由的path值
2. 路由的匹配是按照注册路由的顺序进行的

学习视频地址：尚硅谷React教程（2022加更，B站超火react教程）_哔哩哔哩_bilibili