React路由中如何为对象属性形式的组件传递Props？

错误根源 #

你的问题出在routes数组里的component字段——你存的是已经实例化的JSX元素（<MainComponent />），而不是组件本身的引用（MainComponent函数）。当你尝试用<e.component msg={msg} />渲染时，React会把这个JSX对象当作组件类型来处理，自然会抛出「元素类型无效」的错误，因为React期望组件是字符串、类或函数，而不是对象。

修复步骤 #

1. 修改routes数组：把component的值改成组件的引用，而非实例化的JSX
2. 正确渲染组件并传递props：在Route的element中，用组件引用创建JSX元素并传入props

修正后的代码 #

const routes = [
  {
    name: `main`,
    path: `/main`,
    // 这里存组件本身，不是实例化的JSX
    component: MainComponent,
  },
]

function MainComponent(props) {
  return <h2>{`Hello ${props.msg}`}</h2>
}

function App() {
  const msg = `world`
  return (
    <BrowserRouter basename="/">
      <Routes>
        {routes.map((e, j) => {
          const Component = e.component; // 遵循React规范，组件变量名大写开头
          return (
            <Route
              key={`${j}`}
              path={e.path}
              // 以e.component的引用创建元素并传递props，符合需求
              element={<Component msg={msg} />}
            />
          )
        })}
      </Routes>
    </BrowserRouter>
  )
}

补充说明 #

React要求组件变量名以大写开头，这样才能区分普通HTML元素和自定义组件。上述写法完全满足你「以e.component形式调用组件」的需求，同时解决了props传递的问题。

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