react 跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案
問題
這樣的問題貌似原因還挺多的，我的問題是帶參數(shù)的url不能刷新，router 5.0版本 ，使用withRouter關(guān)聯(lián)組件進(jìn)行頁面跳轉(zhuǎn)
如下所示
路由代碼
解決方案
在路由組件上最上層元素上加一個(gè)key增加路由的識(shí)別度，因?yàn)槠胀ǖ奶D(zhuǎn)是根據(jù)path來識(shí)別的，但是path帶上參數(shù)時(shí)，路由無法精確識(shí)別。不過，在跳轉(zhuǎn)頁面的時(shí)候，每個(gè)地址都會(huì)在localtion對(duì)象里添加一個(gè)key。如下打印
// 組件掛載
componentDidMount() {
console.log(this.props.location);
}
我們將這個(gè)key綁定在 路由頂層元素上就能精確定位路由了
render() {
return (
{/*就是這個(gè)key*/}
<div key={this.props.location.key}>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/products/:id" component={Products} />
<Route exact path="/about" component={About} />
<Route exact path="/solution" component={Solution} />
<Route
exact
path="/solutionDetails/:id"
component={SolutionDetails}
/>
<Route exact path="/download" component={Download} />
<Route path="/about" component={Download} />
<Route exact path="/details/:id" component={Details} />
<Route path="/contact" component={Contact} />
<Route component={ErrorPage} />
</Switch>
</div>
);
}
然鵝，可能你發(fā)現(xiàn) this.props為{} 空對(duì)象
那可能是因?yàn)槟銢]有使用withRouter關(guān)聯(lián)組件,關(guān)聯(lián)一下就好了。注意一點(diǎn)，app.js無法關(guān)聯(lián)，withrouter只能關(guān)聯(lián)路由組件或者app.js的子組件
import React, { Component } from "react";
import {withRouter } from "react-router";
class routers extends Component {
/**
* 生命周期函數(shù)
*/
// 組件掛載
componentDidMount() {
console.log(this.props.location);
}
render() {
return (
<div key={this.props.location.key}>
</div>
);
}
}
export default withRouter(routers);
到此這篇關(guān)于react 跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案的文章就介紹到這了,更多相關(guān)react 跳轉(zhuǎn)后頁面沒刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react中的useImperativeHandle()和forwardRef()用法
這篇文章主要介紹了react中的useImperativeHandle()和forwardRef()用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
深入理解React調(diào)度(Scheduler)原理
本文主要介紹了深入理解React調(diào)度(Scheduler)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom
這篇文章主要介紹了react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合2022-10-10
useCallback是react中比較重要的一個(gè)hook，useCallback 用來返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2022-11-11
React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼
本篇文章主要介紹了React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
React-router4路由監(jiān)聽的實(shí)現(xiàn)
這篇文章主要介紹了React-router4路由監(jiān)聽的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
寫react的時(shí)候，踩了幾次坑發(fā)現(xiàn)setstate之后state不會(huì)立刻更新，于是判定setstate就是異步的方法，但是直到有一天，我想立刻拿到更新的state去傳參另一個(gè)方法的時(shí)候，才問自己，為什么setstate是異步的？準(zhǔn)確地說，在React內(nèi)部機(jī)制能檢測(cè)到的地方，setState就是異步的2022-10-10
這篇文章主要介紹了React組件間傳值及跨組件通信的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02