React Router中无法通过Route向组件传递Props的问题求助

错误原因 #

你遇到的问题核心是：pagesData里的Element字段存的是JSX实例（比如<Cover />），而不是组件本身（比如Cover这个函数/类）。当你写<Element />时，React会把Element当成组件类型去渲染，但它本质是已经创建好的React元素，不是可复用的组件，所以触发类型错误。

之前element={Element}能正常运行，是因为Route的element属性直接接受React元素，你传的是现成的渲染结果，但这种方式没法给组件加额外props。

解决方案 #

方案1：修改pagesData存储组件而非JSX实例

这是最规范的做法，把pagesData里的Element改成组件本身（不要带<>）：

1. 先导入所有页面组件：

import Cover from './pages/Cover';
import OtherPage from './pages/OtherPage';

2. 重构pagesData数组：

const pagesData = [
  { title: '封面', path: 'cover', Element: Cover },
  { title: '其他页面', path: 'other', Element: OtherPage },
  // ...其他页面配置
];

3. 映射Route时直接传props：

pagesData.map(({ title, path, Element }) => {
  return (
    <Route 
      key={title} 
      path={`/${path}`} 
      element={<Element changePage={changePage} />} 
    />
  );
});

这样React就能正确识别Element是组件，并且顺利传递changePage等props。

方案2：用React.cloneElement给现有JSX实例加props

如果没法修改pagesData的存储结构，就用React.cloneElement方法，在已有的JSX实例上添加新props：

import React from 'react';

// 映射Route时
pagesData.map(({ title, path, Element }) => {
  // 克隆原JSX元素并添加props
  const elementWithProps = React.cloneElement(Element, { 
    changePage: changePage 
  });
  return (
    <Route 
      key={title} 
      path={`/${path}`} 
      element={elementWithProps} 
    />
  );
});

这个方法会保留原JSX元素的所有属性，同时追加你需要传递的props。

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