React函数组件通过Link传递路由数据报错问题求助

常见报错原因 #

最常见的触发原因是：

• 直接在地址栏输入目标路由地址、或者刷新目标路由页面时，location.state没有来源会变成undefined，直接解构就会抛出类型错误
• react-router版本不兼容，路由配置不正确
• 跳转时没有走Link组件触发，比如用window.location.href跳转不会携带路由state参数

可行解决方案 #

1. 增加边界兜底逻辑，避免空值报错 #

修改Customizer组件的取值逻辑，用可选链+空值合并运算符兜底，避免state为空时崩溃：

import { useLocation, useParams, useEffect } from "react-router-dom";

const Customizer = () => {
  const { handle } = useParams();
  const location = useLocation();
  // 可选链判断state是否存在，空值时给默认值
  const val = location.state?.val ?? "你的默认 fallback 值";

  useEffect(() => {
    console.log("data from", val);
  }, [val]); // 给useEffect补充依赖数组，避免无意义重复执行

  // 剩余组件逻辑
  return <></>
};

2. 适配react-router版本的路由配置 #

如果使用react-router v6 版本，确认/Customizer路由正常注册在全局<Routes>节点下：

import { Routes, Route, BrowserRouter } from 'react-router-dom';
import Customizer from './Customizer';
import 你的源组件 from './你的源组件路径';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<你的源组件 />} />
        <Route path="/Customizer" element={<Customizer />} />
        {/* 其余路由配置 */}
      </Routes>
    </BrowserRouter>
  )
}

3. 校验跳转触发逻辑 #

确认跳转是通过你写的Link组件触发，不要用window.location.href="/Customizer"这类原生跳转，这类跳转不会携带路由state参数。如果需要在非组件场景跳转传值，可以用useNavigate钩子（v6版本）：

const navigate = useNavigate()
navigate('/Customizer', { state: { val: 'some data' } })

内容的提问来源于stack exchange，提问作者S.Hashmi