react跳轉(zhuǎn)后路由變了頁面沒刷新的解決

更新時(shí)間：2023年03月11日 15:03:43 作者：checkMa

這篇文章主要介紹了react跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

問題

這樣的問題貌似原因還挺多的，我的問題是帶參數(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);

總結(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類型提示的方法
這篇文章主要介紹了為react組件庫添加typescript類型提示，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
關(guān)于react ant 組件 Select下拉框值回顯的問題
這篇文章主要介紹了關(guān)于react ant 組件 Select下拉框值回顯的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(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ǔ)到高級(jí)用法,詳細(xì)介紹如何在 React 項(xiàng)目中優(yōu)雅地使用 Hooks 進(jìn)行服務(wù)端數(shù)據(jù)獲取,涵蓋錯(cuò)誤處理、加載狀態(tài)、性能優(yōu)化等核心場(chǎng)景,并提供可直接復(fù)用的代碼模板,需要的朋友可以參考下
2025-03-03
React組件通信的實(shí)現(xiàn)示例
在React中,組件通信是一個(gè)重要的概念,它允許不同組件之間進(jìn)行數(shù)據(jù)傳遞和交互，本文主要介紹了React組件通信的實(shí)現(xiàn)示例，感興趣的可以了解一下
2023-11-11
詳解如何在React函數(shù)式組件中使用MobX
MobX 是一個(gè)簡(jiǎn)潔的狀態(tài)管理庫,它通過透明的函數(shù)響應(yīng)式編程（TFRP）使得狀態(tài)管理變得簡(jiǎn)單和可擴(kuò)展,下面就跟隨小編一起來了解一下如何在React函數(shù)式組件中使用MobX吧
2024-01-01
React-native橋接Android原生開發(fā)詳解
本篇文章主要介紹了React-native橋接Android原生開發(fā)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01