v6升级实战：useNavigate跳转参数传递问题解决

最近在将项目从React Router v5升级到v6时，遇到了一个令人头疼的问题——使用useNavigate进行页面跳转时，参数传递出现了异常。这个看似简单的问题，在实际开发中却让我踩了不少坑。

问题复现

升级后，我将原来的<Redirect>组件替换为useNavigate，代码如下：

const navigate = useNavigate();
const handleClick = () => {
  navigate('/detail', { state: { id: 123, name: 'test' } });
};

但在目标页面/detail中，通过useLocation()获取的state竟然为空对象！这让我一度怀疑人生。

根本原因

经过排查发现，问题出在项目中使用了react-router-dom的BrowserRouter包装。在v6中，useNavigate的参数传递机制有所改变，如果路由配置不当，会导致state丢失。

解决方案

方案一：确保路由配置正确

// router.js
<Routes>
  <Route path="/" element={<Layout/>}>
    <Route index element={<Home />} />
    <Route path="detail" element={<Detail />} />
  </Route>
</Routes>

方案二：使用对象形式传递参数

const navigate = useNavigate();
const handleClick = () => {
  navigate('/detail?id=123&name=test'); // 使用查询字符串
};

方案三：封装导航函数

const useCustomNavigate = () => {
  const navigate = useNavigate();
  return (path, state) => {
    navigate(path, { replace: true, state });
  };
};

经验总结

v6的升级确实带来了更好的性能和更清晰的API，但参数传递问题需要特别注意。建议在升级前做好充分测试，避免线上出现意外情况。

Chris905 · 2026-01-08T10:24:58

v6的state传递问题确实坑人，但根本不是路由配置问题，而是你没理解useNavigate的replace和state逻辑。建议直接用navigate(path, { state: data, replace: false })，别瞎搞查询字符串，既不优雅也不安全。

Rose116 · 2026-01-08T10:24:58

封装navigate函数是伪需求，真正该做的是统一管理路由参数的传递方式。别再用state传复杂对象了，改成useSearchParams + URLSearchParams更可靠，至少不会因为路由层级问题丢数据。

Ruth226 · 2026-01-08T10:24:58

别被官方文档误导了，v6的navigate参数传递机制其实很简单，但前提是你的项目结构不能有多个BrowserRouter嵌套。建议升级前先做一次全量路由梳理，尤其是那些动态路由和嵌套路由的跳转逻辑

v6升级实战：useNavigate跳转参数传递问题解决