How to hide parent component when routing to nested path v6 reactjs?

Question

The Exhibitions element holds a table of 9 exhibitions. On click on an exhibition from the table I want to route to the page of the exhibition (Exhibit1), currently attempting to do so via nested routing.

In the Exhibitions const I have <Link to='/exhibitions/exhibit1'> Exhibit1 </Link> ... <Outlet/>

When clicking on the Link the Exhibit1 component renders under the table.

How can I go about hiding the parent element (Exhibitions), and route to the Exhibit1 page ?

Appreciate all pointers to a workaround.

<Routes>
 <Route path='/' element={<Home/>}/>
 <Route path='/home' element={<Home/>}/>
 <Route path='/aboutUs' element={<AboutUs/>}/>

 <Route path='/exhibitions' element={<Exhibitions/>}> 
  <Route path='exhibit1' element={<Exhibit1/>}/>
 </Route>

 <Route path='/photographers' element={<Photographers/>}/>
 <Route path='/contact' element={<Contact/>}></Route> 
 <Route path='*' element={<Error/>}> </Route> 
</Routes>

Drew Reese · Accepted Answer · 2022-05-10 15:36:31Z

7

You can use a layout route that renders an Outlet by default and move the Exhibitions component into an index route.

Example:

<Route path='/exhibitions'>
  <Route index element={<Exhibitions />} />        // "/exhibitions"
  <Route path='exhibit1' element={<Exhibit1 />} /> // "/exhibitions/exhibit1"
</Route>

See:

answered May 10, 2022 at 15:36

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

Collectives™ on Stack Overflow

How to hide parent component when routing to nested path v6 reactjs?

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