Rendering a react component variable with react router v6

Viewed 66

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 } />
1 Answers

you can call your variable as a function

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