Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

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

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

7 months ago · Juan Pablo Isaza
2 answers
Answer question

0

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

7 months ago · Juan Pablo Isaza Report

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.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs