首页 >> 大全

【react全家桶】react路由

2023-06-24 大全 92 作者:考证青年

react路由

5.1. 路由的简介

单页Web应用( page web ,SPA)。整个应用只有一个完整的页面。击页面中的链接不会刷新页面,只会做页面的局部更新。数据都需要通过ajax请求获取,

并在前端异步展现,且是单页面、多组件

一个路由就是一个映射关系(key:value)

key为路径, value可能是或

(1) value是, 用来处理客户端提交的请求。

(2)注册路由: .get(path, (req, res))

(3)当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由:

(1)浏览器端路由,value是,用于展示页面内容。

(2)注册路由:

(3)工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件

(4)前端路由也要靠BOM 上的

5.2 路由的基本使用

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

导航区的a标签改为Link标签

Demo

展示区写Route标签进行路径的匹配(在呈现路由组件内容的位置注册路由)

}/>}/>

5.3 路由组件与一般组件

写法不同:

一般组件:

路由组件:

存放位置不同:

一般组件:

路由组件:pages

接收到的props不同:

一般组件:写组件标签时传递了什么,就能收到什么

路由组件:接收到三个固定的属性

5.4 及其封装 5.5

注册路由时用包裹所有路由

通常情况下,path和是一一对应的关系。

可以提高路由匹配效率(单一匹配)。

5.6 路由的模糊匹配与严格匹配 默认使用的是模糊匹配(【输入的路径】必须包含要【匹配的路径】,且顺序要一致)

<MyNavLink to="/about/a/b">Home</MyNavLink>  //模糊匹配
<Route path="/about" component={About}/>

开启严格匹配:

// exact={true}可以简写为exact

严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由 5.7 重定向

一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到指定的路由

5.8 向路由组件传递参数

state参数

路由链接(携带参数):

详情

注册路由(无需声明,正常注册即可):

接收参数:this.props..state

备注:刷新也可以保留住参数,但回退不行,无法回退到上一个·同级路由

5.9 编程式路由导航

借助this.prosp.对象上的API对操作路由跳转、前进、后退,而不用路由的和,但还是要注册路由

5.的使用

可以加工一般组件,让一般组件具备路由组件所特有的API

的返回值是一个新组件。

在一般组件中要用到路由组件的props属性时引入。

import {withRouter} from 'react-router-dom'

//需要暴露
export default withRouter(Header)

5.12 与的区别

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了