react 跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決方案
問(wèn)題
這樣的問(wèn)題貌似原因還挺多的，我的問(wèn)題是帶參數(shù)的url不能刷新，router 5.0版本 ，使用withRouter關(guān)聯(lián)組件進(jìn)行頁(yè)面跳轉(zhuǎn)
如下所示
路由代碼
解決方案
在路由組件上最上層元素上加一個(gè)key增加路由的識(shí)別度，因?yàn)槠胀ǖ奶D(zhuǎn)是根據(jù)path來(lái)識(shí)別的，但是path帶上參數(shù)時(shí)，路由無(wú)法精確識(shí)別。不過(guò)，在跳轉(zhuǎn)頁(yè)面的時(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)槟銢](méi)有使用withRouter關(guān)聯(lián)組件,關(guān)聯(lián)一下就好了。注意一點(diǎn)，app.js無(wú)法關(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)后路由變了頁(yè)面沒(méi)刷新的解決方案的文章就介紹到這了,更多相關(guān)react 跳轉(zhuǎn)后頁(yè)面沒(méi)刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了對(duì)于React各種狀態(tài)管理器的解讀,文中給大家提到了狀態(tài)管理器是如何使用的，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
react如何使用mobx6動(dòng)態(tài)加載數(shù)據(jù)
MobX是一個(gè)強(qiáng)大而簡(jiǎn)單的狀態(tài)管理工具,它可以幫助我們更好地組織和管理React應(yīng)用程序中的數(shù)據(jù)流,本文給大家介紹react如何使用mobx6動(dòng)態(tài)加載數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了React 組件間的通信示例，主要通信劃分為三種，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了如何在HTML頁(yè)面中使用 React，使用使用js模塊化的方式開(kāi)發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
React配置多個(gè)代理實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求返回問(wèn)題
這篇文章主要介紹了React之配置多個(gè)代理實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求返回問(wèn)題，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)方式
這篇文章主要介紹了react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
最近需要使用 Hybrid 的方式開(kāi)發(fā)一 個(gè) APP,交互和原生 APP 相似并且需要 IM 通信,本文給大家介紹了使用React實(shí)現(xiàn)原生APP切換效果,文中通過(guò)代碼示例講解的非常詳細(xì),感興趣的小伙伴跟著小編一起來(lái)看看吧2025-01-01
React封裝自定義Hook捕獲所有錯(cuò)誤的實(shí)現(xiàn)方法
在 React 開(kāi)發(fā)中,錯(cuò)誤處理是確保應(yīng)用穩(wěn)定性和用戶體驗(yàn)的重要部分,React 提供了多種錯(cuò)誤捕獲方式,包括錯(cuò)誤邊界**等,本文將詳細(xì)介紹這些方法,并展示如何封裝一個(gè)能夠捕獲所有同步和異步錯(cuò)誤的自定義 Hook,需要的朋友可以參考下2024-12-12
詳解React-Native全球化多語(yǔ)言切換工具庫(kù)react-native-i18n
這篇文章主要介紹了詳解React-Native全球化語(yǔ)言切換工具庫(kù)react-native-i18n,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了React中使用UEditor的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08