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

Question

I am using react router v6 and I want to render a component stored in a variable. In earlier versions of react router they have component props that allows you to render a component using a variable without the JSX syntax, however the V6 doesn't allow that.

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

Answer 1

you can call your variable as a function

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