React路由
SPA应用
Single Page Web Application 简称SPA应用——单页Web应用,整个应用只有一个完整的页面,点击页面中的链接不会刷新页面,只会做页面的局部更新;数据都需要通过ajax请求获取,并在前端异步展现。
路由的理解
什么是路由?
- 一个路由就是一个映射关系(key:value)
- key为路径,value 可能是 function 或 component
路由分类
后端路由
- 理解:value 是 function,用来处理客户端提交的请求
- 注册路由:router.get(path,function(req,res))
- 工作过程:当node接收到一个请求时,根据请求路径找到匹配的路由,调用路由中的函数来处理请求,返回相应数据
前端路由
- 浏览器端路由,value 是 component,用于展示页面内容
- 注册路由:<Route path="/test" component={Test}>
- 工作过程:当浏览器的path变为 /test时,当前路由组件就会变成Test组件
路由的基本使用
-
明确界面中的导航区、展示区
-
导航区的a标签改为Link标签:<Link to="/xxxxx">Demo</Link>
-
展示区写Route标签进行路径的匹配:<Route path='/xxxx' component={Demo}/>
-
<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
路由组件与一般组件
一般组件 | 路由组件 | |
---|---|---|
写法 | <Demo/> | <Route path='/demo' component={Demo}> |
存放位置 | components | pages |
props | 写的时候传递了什么,就接收到什么 | 三个固定的属性(history、location、match) |
Switch的使用
-
通常情况下,path和component是一一对应的关系
-
Switch可以提高路由匹配效率(单一匹配)
解决多级路径刷新页面样式丢失的问题
- public/index.html 中 引入样式时不写 ./ 写 /(常用)
- public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL%(常用)
- 使用HashRouter
嵌套路由
- 注册子路由时要写上父路由的path值
- 路由的匹配是按照注册路由的顺序进行的