使用 React Router v6 渲染 React 组件变量

Question

我正在使用 react router v6，我想渲染存储在变量中的组件。 在早期版本的 React Router 中，它们具有组件属性，允许您使用不使用 JSX 语法的变量来渲染组件，但是 V6 不允许这样做。

import ComponentName from "components/ComponentName"
...
const component = ComponentName;
...
<Router path="..." element={component } />

Answer 1

您可以将变量称为 function

import ComponentName from "components/ComponentName"
...
const component = ComponentName;
...
<Router path="..." element={component()} />