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

Question

展览元素举办了 table 9 场展览。单击 table 中的一个展览，我想转到展览页面 (Exhibit1)，目前正在尝试通过嵌套路由进行此操作。

在 Exhibitions const 我有 <Link to='/exhibitions/exhibit1'> Exhibit1 </Link> ... <Outlet/>

单击 Link 时，Exhibit1 组件在 table 下呈现。

如何隐藏父元素 (Exhibitions)，并转到 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>

参见：

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

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

nested-routes

reactjs

react-router