如何在路由到嵌套路径v6 reactjs时隐藏父组件？

Question

展览部份设有9项展览。在我想要路由到展览页面(Exhibit1)的表上点击一个展览，目前正在尝试通过嵌套路由来这样做。

在展览会上我有<Link to='/exhibitions/exhibit1'> Exhibit1 </Link> ... <Outlet/>

单击链接时，Exhibit1组件呈现在表下。

我如何隐藏父元素(展览)，并路由到Exhibit1页面？

欣赏所有指向解决方法的指针。

<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

您可以使用默认呈现Outlet并将Exhibitions组件移动到索引路由的布局路由。

示例：

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

请参见：

• 布局路线
• 索引路径