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>

Answer 1

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:

• Layout Routes
• Index Routes