React Router Redirect跳转后点击浏览器返回按钮无法回到原页面的问题

这个问题我之前也碰到过，本质是Redirect组件的默认行为导致的——默认它会用history.replace()来完成跳转，这会把当前的PageA页面从浏览器的历史记录栈里替换成ErrorPage，而不是新增一条记录。所以当你在ErrorPage点击返回时，浏览器会直接跳过PageA，回到你进入PageA之前的页面。

下面给你几种可行的解决方案，根据你的需求来选：

方案1：让Redirect保留原页面的历史记录 #

如果希望用户点击返回能回到PageA（即使PageA还是会跳回ErrorPage，你可能需要额外处理循环问题），可以给Redirect加上push={true}属性，这样跳转就会在历史栈里新增一条ErrorPage的记录，而不是替换PageA：

// PageA组件修改后
import React from 'react'
import { Redirect } from 'react-router-dom'

const PageA = () => {
  const data = null
  return (
    data ? (<PageAComponent />) : (
      <Redirect 
        to={{ pathname: "/errorPage", state: { referrer: 'PageA' } }} 
        push={true}  // 新增这个属性
      />
    )
  )
}

⚠️ 注意：这样修改后，用户从ErrorPage返回PageA时，如果data仍然是null，会立刻再次跳回ErrorPage，形成循环。如果要避免这个循环，你可以在PageA里判断是否是从ErrorPage返回的，比如通过useLocation获取state：

// PageA组件优化
import React from 'react'
import { Redirect, useLocation } from 'react-router-dom'

const PageA = () => {
  const location = useLocation()
  const data = null
  // 判断是否从ErrorPage返回
  const isComingFromErrorPage = location.state?.fromErrorPage

  if (data) {
    return <PageAComponent />
  } else if (!isComingFromErrorPage) {
    return (
      <Redirect 
        to={{ 
          pathname: "/errorPage", 
          state: { referrer: 'PageA', from: location.pathname } 
        }} 
        push={true}
      />
    )
  } else {
    // 显示友好提示，避免循环跳转
    return <div>数据加载失败，请刷新页面重试</div>
  }
}

// ErrorPage组件修改，返回时标记来源
import React from 'react'
import { useHistory, useLocation } from 'react-router-dom'

const ErrorPage = () => {
  const history = useHistory()
  const location = useLocation()

  const goBack = () => {
    history.push({
      pathname: location.state.referrer,
      state: { fromErrorPage: true }
    })
  }

  return (
    <>
      <div>很抱歉，未找到指定数据</div>
      <button onClick={goBack}>返回上一页</button>
    </>
  )
}

方案2：在ErrorPage里手动处理返回逻辑 #

如果你不想依赖浏览器的返回按钮，而是自己提供一个返回按钮，直接跳转到PageA，这样更可控：

// ErrorPage组件修改
import React from 'react'
import { useHistory, useLocation } from 'react-router-dom'

const ErrorPage = () => {
  const history = useHistory()
  const location = useLocation()

  const goBackToReferrer = () => {
    // 跳转到state里记录的referrer页面
    history.push(location.state.referrer)
  }

  return (
    <>
      <div>很抱歉，未找到指定数据</div>
      <button onClick={goBackToReferrer}>返回PageA</button>
    </>
  )
}

方案3：使用React Router v6的Navigate组件（如果你的项目是v6版本） #

如果你已经升级到React Router v6，Redirect已经被Navigate组件取代了。默认情况下Navigate是用push方式跳转的，所以直接替换成Navigate就能保留历史记录：

// PageA组件（v6版本）
import React from 'react'
import { Navigate } from 'react-router-dom'

const PageA = () => {
  const data = null
  return (
    data ? (<PageAComponent />) : (
      <Navigate 
        to={{ pathname: "/errorPage", state: { referrer: 'PageA' } }} 
      />
    )
  )
}

这样修改后，浏览器返回按钮就能回到PageA了，同样需要注意循环跳转的问题，处理方式和方案1类似。

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