React Router v6 中如何正确向路由组件传递自定义 props

在 React Router v6 中， 的 element 属性只接受一个已渲染的 React 元素（即 JSX），而非组件类型；若直接在 Route 上添加自定义 prop（如 loading、contacts），这些 prop 不会自动透传给目标组件，导致接收端为 undefined。正确做法是将 props 显式传递给组件实例。

在 react router v6 中，`` 的 `element` 属性只接受一个已渲染的 react 元素（即 jsx），而非组件类型；若直接在 `route` 上添加自定义 prop（如 `loading`、`contacts`），这些 prop 不会自动透传给目标组件，导致接收端为 `undefined`。正确做法是将 props 显式传递给组件实例。

React Router v6 彻底重构了路由配置方式，其核心设计原则之一是：element 必须是一个已执行的 JSX 元素（即 ），而非组件引用（如 Component 或 未带 props）。这意味着你不能像 v5 那样通过 render 或 component 属性隐式传参，也不能在 Route 标签上声明自定义属性并期望它们自动注入子组件。

❌ 错误写法（导致 undefined 的根本原因）

<Route 
  path='/contacts' 
  loading={loading}        {/* 这些属性被忽略！ */}
  contacts={getContacts}   {/* Route 组件不消费这些 prop */}
  element={<Contacts />}   {/* Contacts 未接收到任何 props */}
/>

组件本身不解析或转发 loading、contacts 等自定义 prop；它仅将 element 作为最终渲染内容插入 DOM。因此 以无参数形式被调用，props.contacts 和 props.loading 自然为 undefined。

凡科AI抠图

简单好用的在线抠图工具

下载

✅ 正确写法：在 element 中显式构造带 props 的组件实例

<Route 
  path='/contacts' 
  element={<Contacts loading={loading} contacts={getContacts} />} 
/>

此时， 是一个已具名 props 的 React 元素，React Router 会原样渲染它，Contacts 组件即可正常解构使用：

// Contacts.jsx
const Contacts = ({ contacts, loading }) => {
  // ✅ 现在 contacts 和 loading 均有值
  if (loading) return <div className="text-muted">Loading...</div>;

  return (
    <div>
      <h2>Contact List ({contacts.length})</h2>
      <ul>
        {contacts.map(contact => (
          <li key={contact.id}>{contact.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Contacts;

? 补充说明与最佳实践

• 不要滥用 useNavigate 或 useLocation 替代 props 传递：若数据源自父组件状态（如本例的 useState），直接传 props 是最简洁、可预测的方式。
• 避免创建内联函数或对象作为 element（如 element={），以防不必要的重渲染；如需复杂逻辑，可封装为记忆化组件或使用 Context。
• 类型安全建议（TypeScript）：为 Contacts 添加明确的 Props 接口，避免运行时 undefined 问题：

  interface ContactsProps {
    contacts: Contact[];
    loading: boolean;
  }
  const Contacts: React.FC<ContactsProps> = ({ contacts, loading }) => { ... };

✅ 总结

React Router v6 的 element 属性本质是“渲染槽”，它不代理 props，只负责挂载你提供的 JSX。要向路由组件传参，必须在 element 中显式展开 props——这是约定而非缺陷，也是保持路由配置纯净、职责单一的关键设计。掌握这一模式，可避免 90% 的“props undefined”类路由传参问题。