React Router DOM修改history不卸载组件及pushState等效实现咨询

核心疑问解答 #

React Router DOM 本身就封装了和原生History.pushState()功能完全一致的API，同时也有不依赖它的实现方案，两种方案都可以满足你「路由更新但组件不卸载重建、仅触发重渲染」的需求，具体实现如下：

方案1：依赖React Router DOM实现（推荐） #

前置要求 #

首先要确保你的路由配置是匹配动态路径段的格式，示例配置：

// React Router v6 路由配置
{
  path: '/home/:firstId/:secondId',
  element: <你的目标组件 />
}

只要路径规则匹配，无论最后一段参数是1/2/3，都会复用同一个组件实例，不会触发卸载重建。

具体实现 #

React Router v6 用useNavigate钩子，v5及更早版本用useHistory钩子，都是对原生history API的封装，内部已经处理了和路由状态的同步逻辑，不会出现状态不同步的问题。
示例代码（v6版本）：

import { useNavigate, useParams } from 'react-router-dom'

function TargetComponent() {
  const navigate = useNavigate()
  // 获取当前路径的动态参数
  const { secondId } = useParams()
  const currentNum = Number(secondId)

  const handleBtnClick = () => {
    // 等价于原生history.pushState，会新增历史栈记录，不会刷新页面
    navigate(`/home/1/${currentNum + 1}`)
  }

  return (
    <div>
      <p>当前路径最后一段参数：{currentNum}</p>
      <button onClick={handleBtnClick}>点击更新路由</button>
    </div>
  )
}

v5版本只要把useNavigate替换为useHistory即可：

const history = useHistory()
// 调用push方法更新路由
history.push(`/home/1/${currentNum + 1}`)

方案2：不依赖React Router DOM实现 #

方案2.1 原生History.pushState()实现 #

直接调用原生API，配合事件监听处理路径变化，手动维护组件状态触发重渲染：

import { useState, useEffect } from 'react'

function TargetComponent() {
  // 初始化从当前路径提取最后一段数值
  const [currentNum, setCurrentNum] = useState(() => {
    const pathSegments = window.location.pathname.split('/')
    return Number(pathSegments[pathSegments.length - 1])
  })

  useEffect(() => {
    // 监听浏览器前进后退触发的路径变化
    const handlePathChange = () => {
      const pathSegments = window.location.pathname.split('/')
      setCurrentNum(Number(pathSegments[pathSegments.length - 1]))
    }
    window.addEventListener('popstate', handlePathChange)
    return () => window.removeEventListener('popstate', handlePathChange)
  }, [])

  const handleBtnClick = () => {
    const newNum = currentNum + 1
    // 原生pushState调用，不会触发页面刷新
    window.history.pushState(null, '', `/home/1/${newNum}`)
    // 手动更新状态触发组件重渲染
    setCurrentNum(newNum)
  }

  return (
    <div>
      <p>当前路径最后一段参数：{currentNum}</p>
      <button onClick={handleBtnClick}>点击更新路由</button>
    </div>
  )
}

方案2.2 Hash路由实现 #

如果不需要修改路径的pathname部分，可以用hash路由实现，逻辑更简单，不需要服务端额外适配：

import { useState, useEffect } from 'react'

function TargetComponent() {
  const [currentNum, setCurrentNum] = useState(() => {
    return Number(window.location.hash.slice(1)) || 1
  })

  useEffect(() => {
    const handleHashChange = () => {
      setCurrentNum(Number(window.location.hash.slice(1)) || 1)
    }
    window.addEventListener('hashchange', handleHashChange)
    return () => window.removeEventListener('hashchange', handleHashChange)
  }, [])

  const handleBtnClick = () => {
    const newNum = currentNum + 1
    window.location.hash = newNum
  }

  return (
    <div>
      <p>当前hash值：{currentNum}</p>
      <button onClick={handleBtnClick}>点击更新路由</button>
    </div>
  )
}

注意事项 #

如果你已经在项目中使用React Router DOM，不要直接调用原生pushState方法，会导致React Router内部维护的历史栈和浏览器实际历史栈不同步，出现路由跳转异常等问题，优先使用框架提供的API。

内容的提问来源于stack exchange，提问作者Nijesh