React中路由参数如何改变页面不刷新数据的情况.docxVIP

第

React中路由参数如何改变页面不刷新数据的情况

目录React路由参数改变页面不刷新数据的情况React页面路由前端路由和后端路由前端路由介绍匹配模式路由的执行过程hash模式history模式react-router-domAPI

React路由参数改变页面不刷新数据的情况

路由的参数由于是在componentDidMount中获取的，如果在详情页面再次打开详情页面，由于组件并没有重新渲染，导致didMount不会获取路由参数。

因此在参数改变的时候，可以利用componentWillReceiveProps来更新变量。

//获取路由参数

componentDidMount(){

constdidMountId=this.props.location.query.id;

this.setState({id:didMountId},()={

this.props.pageList({id:this.state.id});//请求接口获取数据

//组件更新时被调用

componentWillReceiveProps(newProps){

if(newProps.location.query.id!==this.state.id){

this.setState({id:newProps.location.query.id},()={

this.props.pageList({id:this.state.id});//当路由参数改变时，重新请求接口获取数据

React页面路由

前端路由和后端路由

在web开发早期的年代里，前端的功能远不如现在这么强大，一直是后端路由占据主导地位。服务端渲染就是在浏览器请求页面URL时，（每次切换页面时，浏览器都会刷新页面）服务端按照不同的URL地址与不同的html+css+后端数据之间的映射，直接将我们需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过JavaScript脚本的执行，可直接构建出完整的DOM树并展示页面中。

前端路由介绍

随着ajax的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是单页Web应用(SinglePageWebApplication,SPA))的兴起，前端路由系统随之开始流行。

1、用户的角度

前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：

记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；

可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；

2、作为开发者

要实现这两个功能，我们需要做到：

改变url且不让浏览器向服务器发出请求；

监测url的变化；

截获url地址，并解析出需要的信息来匹配路由规则。

匹配模式

模糊匹配模式

默认情况下,React路由是模糊匹配模式模糊匹配规则：只要pathname以path开头就会匹配成功，对应的组件就会被渲染出来。

精确匹配

给Route组件添加exact属性，让其变为精确匹配模式精确匹配：只有当path和pathname完全匹配时才会展示该路由，严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由。

路由的执行过程

点击Link组件(a标签）会修改浏览器地址栏中的urlReact路由监听到地址栏url的变化。Reat路由内部遍历所有Route组件，使用路由规则(path)与pathname进行匹配。当路由规则(path)能够匹配地址栏中的pathname时，就展示渲染该Route组件的内容

hash模式

这里的hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也称作锚点，本身是用来做页面定位的，她可以使对应id的元素显示在可视区域内。

由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发hashchange事件，浏览器的进后退也能对其进行控制，所以人们在html5的history出现前，基本都是使用hash来实现前端路由的。

window.location.hash=qq//设置url的hash，会在当前url后加上#qq

varhash=window.loca