这篇文章主要介绍“React中路由参数怎么改变页面不刷新数据的情况”,在日常操作中,相信很多人在React中路由参数怎么改变页面不刷新数据的情况问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React中路由参数怎么改变页面不刷新数据的情况”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
路由的参数由于是在componentDidMount中获取的,如果在详情页面再次打开详情页面,由于组件并没有重新渲染,导致didMount不会获取路由参数。
因此在参数改变的时候,可以利用componentWillReceiveProps来更新变量。
// 获取路由参数 componentDidMount() { const didMountId = 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}); //当路由参数改变时,重新请求接口获取数据 }); } }
在web开发早期的年代里,前端的功能远不如现在这么强大,一直是后端路由占据主导地位。服务端渲染就是在浏览器请求页面URL时,(每次切换页面时,浏览器都会刷新页面)服务端按照不同的URL地址与不同的html + css + 后端数据 之间的映射,直接将我们需要的HTML文本组装好,并返回给浏览器,这个HTML文本被浏览器解析之后,不需要经过JavaScript脚本的执行,可直接构建出完整的DOM树并展示页面中。
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是单页Web应用(Single Page Web Application,SPA))的兴起,前端路由系统随之开始流行。
1、用户的角度
前端路由主要实现了两个功能(使用ajax更新页面状态的情况下):
记录当前页面的状态(保存或分享当前页的url,再次打开该url时,网页还是保存(分享)时的状态);
可以使用浏览器的前进后退功能(如点击后退按钮,可以使页面回到使用ajax更新页面之前的状态,url也回到之前的状态);
2、作为开发者
要实现这两个功能,我们需要做到:
改变url且不让浏览器向服务器发出请求;
监测 url 的变化;
截获 url 地址,并解析出需要的信息来匹配路由规则。
模糊匹配模式
默认情况下, React路由是模糊匹配模式
模糊匹配规则:只要pathname以path开头就会匹配成功,对应的组件就会被渲染出来。
精确匹配
给 Route组件添加exact属性,让其变为精确匹配模式
精确匹配:只有当path和 pathname完全匹配时才会展示该路由,严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由。
点击Link组件(a标签)会修改浏览器地址栏中的url
React路由监听到地址栏url的变化。
Reat路由内部遍历所有 Route组件,使用路由规则(path)与 pathname进行匹配。
当路由规则(path)能够匹配地址栏中的pathname时,就展示渲染该 Route组件的内容
这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash也称作锚点,本身是用来做页面定位的,她可以使对应 id 的元素显示在可视区域内。
由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件,浏览器的进后退也能对其进行控制,所以人们在 html5 的 history 出现前,基本都是使用 hash 来实现前端路由的。
window.location.hash = 'qq' // 设置 url 的 hash,会在当前url后加上 '#qq' var hash = window.location.hash // '#qq' window.addEventListener('hashchange', function(){ // 监听hash变化,点击浏览器的前进后退会触发 })
已经有 hash 模式了,而且 hash 能兼容到IE8, history 只能兼容到 IE10,为什么还要搞个 history 呢?
首先,hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。
其次,hash 的传参是基于 url的,如果要传递复杂的数据,会有体积的限制,而history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。
window.history.pushState(state, title, url) // state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取 // title:标题,基本没用,一般传 null // url:设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的,否则会抛出错误。url可以是绝对路径,也可以是相对路径。
window.history.replaceState(state, title, url) // 与 pushState 基本相同,但她是修改当前历史记录,而 pushState 是创建新的历史记录 window.addEventListener("popstate", function() { // 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发 }); window.history.back() // 后退 window.history.forward() // 前进 window.history.go(1) // 前进一步,-2为后退两步,window.history.length可以查看当前历史堆栈中页面的数量
React实现页面路由的模块:react-router-dom
1、HashRouter和BrowserRouter
其实就是路由的hash和history两种模式,并且这两个组件是路由的容器,必须在最外层。
// hash模式 ReactDOM.render( <HashRouter> <Route path="/" component={Home}/> </HashRouter> )
// history模式 ReactDOM.render( <BrowserRouter> <Route path="/" component={Home} /> </BrowserRouter> )
2、Route
路由的一个原材料,它是控制路径对应显示的组件。 Route的参数:
path
:跳转的路径
component
: 对应路径显示的组件
render
:可以自己写render函数返回具体的dom,而不需要去设置component。
location
: 传递route对象,和当前的route对象对比,如果匹配则跳转
exact
: 匹配规则,true的时候则精确匹配。
3、Link和NavLink
(1)Link的api
to: 有两种写法,表示跳转到哪个路由
字符串写法
<Link to="/a" />
对象写法
<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/>
replace
:就是将push改成replace
innerRef
:访问Link标签的dom
(2) NavLink的api
Link的所有api
activeClassName 路由激活的时候设置的类名
activeStyle 路由激活设置的样式
exact 参考Route,符合这个条件才会激活active类
strict 参考Route,符合这个条件才会激活active类
isActive 接收一个回调函数,active状态变化的时候回触发,返回false则中断跳转。
const oddEvent = (match, location) => { console.log(match,location) if (!match) { return false } console.log(match.id) return true } <NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>
location 接收一个location对象,当url满足这个对象的条件才会跳转。
<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>
4、Redirect:页面重定向
// 基本的重定向 <Redirect to="/somewhere/else" /> // 对象形式 <Redirect to={{ pathname: "/login", search: "?utm=your+face", state: { referrer: currentLocation } }} /> // 采用push生成新的记录 <Redirect push to="/somewhere/else" /> // 配合Switch组件使用,form表示重定向之前的路径,如果匹配则重定向,不匹配则不重定向 <Switch> <Redirect from='/old-path' to='/new-path'/> <Route path='/new-path' component={Place}/> </Switch>
5、Switch
路由切换,只会匹配第一个路由,可以想象成tab栏
Switch内部只能包含Route、Redirect、Router
<Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>
6、Router Hooks
在Router5.x中新增加了Router Hooks用于在函数组件中获取路由信息。使用规则和React的其他Hooks一致。
useHistory
:返回history对象
useLocation
:返回location对象
useRouteMatch
:返回match对象
useParams
:返回match对象中的params,也就是path传递的参数
import React from ‘react'; import { useHistory } from ‘react-router-dom'; function backBtn(props) { let history = useHistory; return <button onClick={ ()=> { history.goBack(); }>返回上一页</button> }
7、history对象
在每个路由组件中我们可以使用this.props.history获取到history对象,也可以使用withRouter包裹组件获取,在history中封装了push,replace,go等方法,具体内容如下:
History { length: number; action: Action; location: Location; push(path: Path, state?: LocationState): void; // 调用push前进到一个地址,可以接受一个state对象,就是自定义的路由数据 push(location: LocationDescriptorObject): void; // 接受一个location的描述对象 replace(path: Path, state?: LocationState): void; // 用页面替换当前的路径,不可再goBack replace(location: LocationDescriptorObject): void; // 同上 go(n: number): void; // 往前走多少也页面 goBack(): void; // 返回一个页面 goForward(): void; // 前进一个页面 block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback; listen(listener: LocationListener): UnregisterCallback; createHref(location: LocationDescriptorObject): Href; }
这样我们想使用api来操作前进后退就可以调用history中的方法
到此,关于“React中路由参数怎么改变页面不刷新数据的情况”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。