如何通过react router dom的Link/Routes传递props且不导致URL过长

你当前将所有参数都写入路由路径占位符的方式，仅适合传递少量公开的必填标识类参数（比如资源id），大量参数这么写确实会导致URL过长，还存在敏感数据暴露的问题，有两种更合理的实现方式：

方案1：使用Link的state属性隐式传参（无URL暴露，推荐） #

这是React Router原生支持的传参方式，参数不会出现在地址栏中，完全符合你的使用需求：

1. 先简化路由配置，仅保留必要的路径参数即可：

// Routes.js
{
  path: "/edit/:id",
  component: ActionsPage,
  exact: true,
}

2. 在跳转的Link组件中通过state字段传递所有动态参数：

// 触发跳转的组件内Link写法
<Link 
  to={{
    pathname: `/edit/${item.id}`,
    state: {
      name: item.name,
      email: item.email,
      status: item.status,
      gender: item.gender,
      title: item.title,
      method: 'edit'
    }
  }}
>
  编辑条目
</Link>

如果是用useNavigate做编程式跳转，写法如下：

const navigate = useNavigate()
// 跳转逻辑
navigate(`/edit/${item.id}`, {
  state: {
    name: item.name,
    email: item.email,
    // 其余参数直接加在这里即可
  }
})

3. 在ActionsPage组件中用useLocation获取传递的参数：

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

function ActionsPage() {
  const { id } = useParams()
  const { state } = useLocation()
  // 直接从state中取出所有参数
  const { name, email, status, gender, title, method } = state || {}
  // 后续业务逻辑
}

注意：该方式传递的参数刷新页面不会丢失，仅当用户手动在地址栏输入路径进入该页面时state才会为空，你可以加兜底判断，为空时根据id调用接口拉取对应数据即可。

方案2：直接给路由组件传props（适合固定参数场景） #

如果需要传递的是不随跳转变化的固定配置参数，可以直接像普通组件一样给路由挂载的组件传props：

// Routes.js 路由配置
{
  path: "/edit/:id",
  element: <ActionsPage fixedConfig="自定义固定参数" />,
  exact: true,
}

在ActionsPage中直接接收props即可：

function ActionsPage(props) {
  console.log(props.fixedConfig) // 输出预设的固定参数
  // 其余业务逻辑
}

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