React项目中如何用Context保存prevPath实现正确页面返回？

问题背景 #

项目路由包含/products、/favorite-products、/new-products等列表页，点击商品跳转至/products/:productId详情页；详情页下还有/products/:productId/comments、/products/:productId/seller等子路由页，从seller页可跳转至/sellers/:sellerId（可能带参数如/sellers?page=2）。

核心需求：

• 详情页返回按钮需回到用户来源列表页（而非固定/products）
• 从/products/:productId/seller跳转至卖家页后，返回按钮需回到该seller子页
• 不能用history.goBack()（需支持链接分享），react-router-dom的state会被子路由覆盖，无法使用

现有方案局限：通过Context存储单一prevPath，仅能处理列表页→详情页的返回，无法处理详情子页→卖家页的返回需求（会覆盖列表页路径）。

解决方案：两种可行实现方案 #

方案1：按场景标识存储返回路径 #

修改Context，让setPrevPath支持传入场景key，针对不同页面类型存储对应的返回路径，避免互相覆盖。

1. 更新Context实现

import { useState } from 'react'
import constate from 'constate'
import { Location } from 'history'

export const usePrevPath = () => {
  // 用对象存储不同场景的返回路径
  const [pathMap, setPathMap] = useState<Record<string, string>>({})

  const setPrevPath = (location: Location, sceneKey: string) => {
    const { pathname, search } = location
    setPathMap(prev => ({
      ...prev,
      [sceneKey]: `${pathname}${search}`
    }))
  }

  // 获取对应场景的返回路径，默认返回/products
  const getPrevPath = (sceneKey: string) => {
    return pathMap[sceneKey] ?? '/products'
  }

  return { setPrevPath, getPrevPath }
}

export const [PrevPathProvider, usePrevPathContext] = constate(usePrevPath)

2. 列表页代码（场景key用productList）

// 商品列表页
const location = useLocation()
const { setPrevPath } = usePrevPathContext()

return(
  <Link
    to={`/products/${productId}`}
    onClick={() => setPrevPath(location, 'productList')}>
    Product Name
  </Link>
)

3. 详情页代码（使用productList场景的路径）

// 商品详情页
const { getPrevPath } = usePrevPathContext()

return (
  <Link to={getPrevPath('productList')}>Go back to list</Link>
)

4. 详情seller子页代码（场景key用sellerPage）

// /products/:productId/seller 页面
const location = useLocation()
const { setPrevPath } = usePrevPathContext()

return(
  <Link
    to={`/sellers/${sellerId}${search}`}
    onClick={() => setPrevPath(location, 'sellerPage')}>
    View Seller
  </Link>
)

5. 卖家页代码（使用sellerPage场景的路径）

// /sellers/:sellerId 页面
const { getPrevPath } = usePrevPathContext()

return (
  <Link to={getPrevPath('sellerPage')}>Go back to product seller info</Link>
)

方案2：路径栈管理（支持多级返回） #

如果需要更灵活的多级返回场景，可以用栈结构存储路径，每次跳转时将当前路径压入栈，返回时取出栈顶路径（注意处理栈为空的情况）。

1. 更新Context实现

import { useState } from 'react'
import constate from 'constate'
import { Location } from 'history'

export const usePrevPath = () => {
  const [pathStack, setPathStack] = useState<string[]>([])

  // 跳转时压入当前路径
  const pushPath = (location: Location) => {
    const { pathname, search } = location
    const fullPath = `${pathname}${search}`
    setPathStack(prev => [...prev, fullPath])
  }

  // 获取当前栈顶路径（不弹出，用于静态渲染Link）
  const getTopPath = () => {
    return pathStack[pathStack.length - 1] ?? '/products'
  }

  return { pushPath, getTopPath }
}

export const [PrevPathProvider, usePrevPathContext] = constate(usePrevPath)

2. 列表页跳转时压入路径

const location = useLocation()
const { pushPath } = usePrevPathContext()

return(
  <Link
    to={`/products/${productId}`}
    onClick={() => pushPath(location)}>
    Product Name
  </Link>
)

3. 详情seller子页跳转时压入路径

const location = useLocation()
const { pushPath } = usePrevPathContext()

return(
  <Link
    to={`/sellers/${sellerId}${search}`}
    onClick={() => pushPath(location)}>
    View Seller
  </Link>
)

4. 返回按钮使用

// 详情页返回列表
const { getTopPath } = usePrevPathContext()
return <Link to={getTopPath()}>Go back</Link>

// 卖家页返回seller子页
const { getTopPath } = usePrevPathContext()
return <Link to={getTopPath()}>Go back</Link>

注意：栈方案在页面刷新后会清空，此时返回按钮会回到默认的/products，符合需求；如果需要持久化栈，可以结合localStorage存储，但要注意路由参数的时效性。

方案选择 #

• 如果场景明确（仅需区分列表→详情、子页→卖家页两种返回链路），方案1更简单直接，无需管理栈的状态。
• 如果有更多多级跳转的场景（比如卖家页再跳转到其他页面，需要逐级返回），方案2的栈结构更灵活。

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