React BrowserRouter与NavLink向子组件传参问题

算力阿峰

2026-7-23

问题解决：React Router v6 传递路由状态到组件

错误原因分析

当前代码报错是因为React Router v6中<Route>的element属性必须接收React元素，而非函数。你写的element={(props) => <Info {...props} />}将函数作为子元素传递，不符合规则。另外，React Router v6不再自动向路由组件传递location、history等props，直接从props中获取location会触发错误。

修复步骤

1. 修正路由配置

将路由里的element改为直接渲染<Info />，无需函数包裹：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/user" element={<User />} />
    {/* 直接渲染组件，移除函数包裹 */}
    <Route path="/info" element={<Info />} />
  </Routes>
</BrowserRouter>

2. 在Info组件中使用useLocation钩子获取路由状态

React Router v6提供useLocation钩子获取路由相关状态，替换原从props取location的方式：

import { useLocation } from 'react-router-dom'; // 导入钩子

export const Info = () => {
  const location = useLocation();
  // 用可选链避免无state时报错
  const ex = location.state?.example;
  console.log(ex);
  
  return (
    <div>
      {ex ? ex : '无数据'}
    </div>
  );
};

3. 确认NavLink跳转写法（无需修改）

你的NavLink写法正确，state会被正常传递到目标路由：

<div>
  {examples.map((example, i) => {
    return (
      <NavLink
        to={{ pathname: "/info", state: { example: example } }}
        key={i}
      >
        <div>I am the link!</div>
      </NavLink>
    );
  })}
</div>