Rendering a react component variable with react router v6

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

Please do not edit solution announcements into the question or title. Accept (i.e. click the "tick" next to it) one of the existing answer, if there are any. You can also create your own answer, and even accept it, if your solution is not yet covered by an existing answer. See Can I answer my own question? — jmoerdyk
– jmoerdyk, Commented May 27, 2022 at 17:47

Sami IMEGHRI · Accepted Answer · 2022-05-27 20:27:57Z

2

you can call your variable as a function

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

answered May 27, 2022 at 20:27

Sami IMEGHRI

413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering a react component variable with react router v6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related