React路由与URL处理：如何隐藏查询字符串参数及路由参数？

1. React路由中能否隐藏查询字符串里的参数？ #

首先得明确一点：直接在URL的查询字符串里隐藏参数是做不到的，因为URL本身就是浏览器地址栏公开显示的内容。不过我们有几种替代方案，可以实现“传递参数但不在URL中暴露”的需求：

• 利用路由的state属性传递参数
  不管是类组件还是函数组件，在跳转页面时都可以通过路由的state来携带参数，这些参数不会出现在URL里。比如：

  • 类组件：

    this.history.push('/component', { id: 123 });
    

  • 函数组件（React Router v6+）：

    const navigate = useNavigate();
    navigate('/component', { state: { id: 123 } });
    

  目标组件里获取参数的方式：

  • 类组件：this.props.location.state?.id
  • 函数组件：const location = useLocation(); const id = location.state?.id;
    👉 注意：这种方式的参数存在内存中，页面刷新后会丢失，如果需要持久化，可以配合localStorage或sessionStorage存储参数。

• 使用全局状态管理工具
  如果你需要传递的参数需要在多个组件间共享，或者希望参数持久化，可以用Redux、Zustand、React Context这类状态管理方案。把参数存在全局状态里，跳转页面后直接从状态中读取，完全和URL无关，自然也就不会暴露在地址栏了。

2. 如何移除URL中的查询字符串？以及导航时不显示id参数？ #

移除URL中的查询字符串

要移除URL里的查询字符串，只需要跳转到当前路径的“纯路径”版本即可：

• 类组件：

  // 用push会添加一条历史记录，用replace则替换当前记录
  this.history.push(this.props.location.pathname);
  // 或者
  this.history.replace(this.props.location.pathname);
  

• 函数组件（React Router v6+）：

  const navigate = useNavigate();
  const location = useLocation();
  navigate(location.pathname); // 或者用replace：navigate(location.pathname, { replace: true })
  

导航时不显示id参数（替代component/:id的动态路由）

你原来用this.history.push('component/:id')的方式是动态路由，URL必然会显示id。要实现跳转后URL不显示id，同样可以用上面提到的路由state传递参数的方案：

1. 首先修改路由配置，把动态路由改成普通路径：

   // 原来的路由（会显示id）
   <Route path="/component/:id" element={<Component />} />
   // 修改后（不显示id）
   <Route path="/component" element={<Component />} />
   

2. 跳转时通过state传递id：

   // 类组件
   this.history.push('/component', { id: yourId });
   

3. 在目标组件Component中通过location.state获取id即可，这样浏览器地址栏只会显示/component，不会出现id参数。

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