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