react-router-dom v6使用NavLink传参时location.state为null如何解决

react-router-dom v6 本身依然兼容通过NavLink的to对象传递state属性的写法，出现location.state为null的问题均为使用场景不符合v6规则导致，按照以下步骤排查修复即可：

• 确认NavLink组件和接收参数的目标组件，都在同一个/上下文的包裹范围内，如果组件处于Router外层，useLocation会读取到默认空值，state自然为null。
• 检查to属性的路径配置，v6的相对路径规则和v5不同：相对路径是相对于父路由路径计算，而非当前页面完整URL。如果你的pathname是不带开头/的相对路径，建议先改为绝对路径测试，避免路径匹配错误跳转到非预期路由导致state丢失。
  参考正确传参写法：

  <NavLink
    key="myRoute"
    to={{
      pathname: "/myRoute", // 绝对路径避免匹配偏差
      state: {myState: "myStateValue"},
    }}
    className="nav-card"
  >
    跳转入口
  </NavLink>
  

• 排查是否存在重定向逻辑丢失state：如果目标路由路径存在重定向配置（比如权限校验用跳转），需要手动透传state属性，否则重定向后参数会丢失。
  错误示例：

  <Route path="/old-path" element={<Navigate to="/myRoute" />} />
  

  正确示例：

  <Route 
    path="/old-path" 
    element={<Navigate to="/myRoute" state={useLocation().state} />} 
  />
  

• 确认参数接收代码写法正确，v6的useLocation用法和v5无差异，可加可选链避免state不存在时报错：

  import { useLocation } from 'react-router-dom';
  
  function TargetComponent() {
    const location = useLocation();
    const myState = location.state?.myState ?? '默认 fallback 值';
  }
  

• 若为跳转后刷新页面导致state为null，属于正常现象：state存储在路由上下文内存中，页面刷新会清空内存数据，该场景建议将参数放在URL查询串（search参数）中，或者用sessionStorage/localStorage持久化存储。
• 若NavLink设置了target="_blank"在新窗口打开路由，新窗口不会继承原页面的路由内存上下文，state会自然丢失，该场景请使用URL查询串传递参数，或者通过sessionStorage跨窗口传递数据。

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