how can i render a component with condition in path in react router?

Question

i want to render a component with a condition in path prop in Route component. think of this: i want to say if path prop in Route component is /hello1 or /hello2 or /hello3and just if the path is one of these address render component </Hello>. something like this:

if(path === '/hello1' || path === '/hello2' || path === '/hello3') render component </Hello>

but in path prop in Route component. is there a way to do this in path prop or not? if not what is the best way to render a component with condition base on the path prop? thanks for your helps

Khant · Accepted Answer · 2022-02-21 07:49:42Z

1

Maybe what you want is kind of change of params

<Route path="/hello/:helloId" element={<Hello/>} />

you can pass in every thing you wanna pass for helloId and it will render Hello component

answered Feb 21, 2022 at 7:49

Khant

1,1422 gold badges12 silver badges30 bronze badges

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

Comments

Shubham Waje · Accepted Answer · 2022-02-21 07:52:18Z

0

It can be done by creating an array of paths and mapping through them as follows:

{["hello1", "hello2", "hello3"].map((route) => (
   <Route
     key={route}
     path={route}
     element={<div>Hello component</div>}
   />
))}

Whatever path you add to the array, the same component will be rendered for those paths.

answered Feb 21, 2022 at 7:52

Shubham Waje

9439 silver badges17 bronze badges

Collectives™ on Stack Overflow

how can i render a component with condition in path in react router?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related