介绍:
今天学习了react的重点知识路由,这个知识点是react中的一大块,大家有兴趣的话可以跟随作者的文章继续学习呦
SPA介绍:
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。
优缺点
单页Web程序的出现是富客户端发展的必然结果，但是该技术也是有些局限性，所以采用之前需要了解清楚它的优缺点。
优点：
-
良好的交互体验 -
良好的前后端工作分离模式 -
减轻服务器压力 -
共用一套后端程序代码
缺点：
-
SEO难度较高 -
前进、后退管理 -
初次加载耗时多
路由的理解
① 什么是路由?
当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。但是这种方式也有一些问题，每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个 JavaScript 重新执行，丢失状态。
安装
npm i -S react-router-dom
② 路由分类
- 后端路由
理解： value是function, 用来处理客户端提交的请求。
注册路由： router.get(path, function(req, res))
工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
- 前端路由
浏览器端路由，value是component，用于展示页面内容。
注册路由:
工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
react-router-dom
安装命令
cnpm install react-router-dom -S
npm install react-router-dom -S
下载到生产环境的依赖中。
在组件中通过对象的解构方式去获取到react-router-dom内置组件，在组件中，按需引入内置组件，在页面中进行使用：
HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
Link表示一个路由的链接，属性to
import {HashRouter,Route,Link} from 'react-router-dom'
路由的基本使用
-
明确好界面中的导航区、展示区 -
导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
- 展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
-
<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
)
-
路由组件与一般组件 -
写法不同：
? 一般组件：
? 路由组件：
- 存放位置不同：
? 一般组件：components
? 路由组件：pages
接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
//路由属性打印结果展示
history:
go: ? go(n)
goBack: ? goBack()
goForward: ? goForward()
push: ? push(path, state)
replace: ? replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: { }
path: "/about"
url: "/about"
- NavLink使用与封装
NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
- Switch的使用
1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配) ---- 即匹配到一个后将不再往下匹配
6、解决多级路径刷新页面样式丢失的问题
-
public/index.html 中 引入样式时不写 ./ 写 / （常用） -
public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用,但只在react中有效果） -
使用HashRouter (不常用)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react脚手架</title>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
- 路由的严格匹配与模糊匹配
默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
开启严格匹配：<Route exact={true}path="/about" component={About}/>
可以省略exact={true}为exact
注意:
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
//编写路由链接
About
Home
{/* 注册路由 */}
<Switch>
<Route exact path="/about" component={About}/>
<Route exact path="/home" component={Home}/>
</Switch>
- Redirect的使用
一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
具体编码：
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
9、嵌套路由
注册子路由时要写上父路由的path值
路由的匹配是按照注册路由的顺序进行的
-------------------注册一级路由-----------------------------
{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>
{/* 注册路由 */}
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
----------------------注册二级路由 :Home组件-----------------------------------
<div>
<ul className="nav nav-tabs">
<li>
<MyNavLink to="/home/news">News</MyNavLink>
</li>
<li>
<MyNavLink to="/home/message">Message</MyNavLink>
</li>
</ul>
{/* 注册路由 */}
<Switch>
<Route path="/home/news" component={News}/>
<Route path="/home/message" component={Message}/>
<Redirect to="/home/news"/>
</Switch>
</div>
- 向路由组件传递参数
路由参数
- history : 历史记录以及路由给我们的一些操作
- location : 获取当前URL的一些信息
- pathname : 当前的URL
- search : 接口参数
- state : 跳转路由时，传递的参数
- match : 当前路由匹配的相关规则
Ⅰ-params参数
路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收)：
接收参数：this.props.match.params
-------------------------------发送参数:父组件----------------------------------------------
<div>
{}
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
<hr />
{}
<Route path="/home/message/detail/:id/:title" component={Detail} />
</div>
--------------------------------接受参数:子组件-----------------------------------------------------------
const {id,title} = this.props.match.params
Ⅱ-search参数
路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
-------------------------------发送参数:父组件----------------------------------------------
<div>
{}
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
<hr />
{}
<Route path="/home/message/detail" component={Detail}/>
</div>
--------------------------------接受参数:子组件-----------------------------------------------------------
import qs from 'querystring'
const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))
Ⅲ-state参数
路由链接(携带参数)：[<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>]
注册路由(无需声明，正常注册即可)：[<Route path="/demo/test" component={Test}/>]
接收参数：this.props.location.state
注意:
-
使用BrowserRouter刷新才可以保留住参数,使用HashRouter刷新后state将会没有history来保存参数 -
子组件接受参数时const {id,title} = this.props.location.state || {} ,后面添加||{}是防止使用HashRouter后state为undefined时报错
-------------------------------发送参数:父组件----------------------------------------------
<div>
{}
<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
<hr />
{}
<Route path="/home/message/detail" component={Detail}/>
</div>
--------------------------------接受参数:子组件-----------------------------------------------------------
const {id,title} = this.props.location.state || {}
11、编程式路由导航
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
-
-this.prosp.history.push()
跳转到指定路径的页面 -
-this.props.history.replace()
替代栈位置,即不会产生历史记录 -
-this.props.history.goBack()
回退一格 -
-this.props.history.goForward()
前进一格 -
-this.props.history.go()
前进或者后退n格(根据传入的数字正负数)
总结:
今天学习了react的核心路由,路由覆盖的知识点非常全面,也比较复杂,初学者会比较容易犯错,大家一定要小心各个知识点的注意事项,react的路由和vue的路由也是有些许相似的,如果有vue基础的话,会更加易学一些,最后希望大家对每个知识点都多加练习,在练习中逐渐掌握```
最后作者创作不易,如果文章对你有帮助的话,记得留下你的点赞呃关注呦
|