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對象里添加一個(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為{} 空對象
那可能是因?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);
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React開發(fā)進(jìn)階redux saga使用原理詳解
這篇文章主要為大家介紹了React開發(fā)進(jìn)階redux saga使用原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了為react組件庫添加typescript類型提示，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
關(guān)于react ant 組件 Select下拉框 值回顯的問題
這篇文章主要介紹了關(guān)于react ant 組件 Select下拉框 值回顯的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Taro?React自定義TabBar使用useContext解決底部選中異常
這篇文章主要為大家介紹了Taro?React底部自定義TabBar使用React?useContext解決底部選中異常(需要點(diǎn)兩次才能選中的問題)示例詳解，有需要的朋友可以借鑒參考下2023-08-08
原生實(shí)現(xiàn)一個(gè)react-redux的代碼示例
這篇文章主要介紹了原生實(shí)現(xiàn)一個(gè)react-redux的代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
react 實(shí)現(xiàn)圖片正在加載中 加載完成 加載失敗三個(gè)階段的原理解析
這篇文章主要介紹了react 實(shí)現(xiàn)圖片正在加載中 加載完成 加載失敗三個(gè)階段的,通過使用loading的圖片來占位，具體原理解析及實(shí)現(xiàn)代碼跟隨小編一起通過本文學(xué)習(xí)吧2021-05-05
React使用Hooks從服務(wù)端獲取數(shù)據(jù)的完整指南
本文將從基礎(chǔ)到高級用法,詳細(xì)介紹如何在 React 項(xiàng)目中優(yōu)雅地使用 Hooks 進(jìn)行服務(wù)端數(shù)據(jù)獲取,涵蓋錯(cuò)誤處理、加載狀態(tài)、性能優(yōu)化等核心場景,并提供可直接復(fù)用的代碼模板,需要的朋友可以參考下2025-03-03
在React中,組件通信是一個(gè)重要的概念,它允許不同組件之間進(jìn)行數(shù)據(jù)傳遞和交互，本文主要介紹了React組件通信的實(shí)現(xiàn)示例，感興趣的可以了解一下2023-11-11
MobX 是一個(gè)簡潔的狀態(tài)管理庫,它通過透明的函數(shù)響應(yīng)式編程（TFRP）使得狀態(tài)管理變得簡單和可擴(kuò)展,下面就跟隨小編一起來了解一下如何在React函數(shù)式組件中使用MobX吧2024-01-01
React-native橋接Android原生開發(fā)詳解
本篇文章主要介紹了React-native橋接Android原生開發(fā)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01