如何停止渲染 app.js 中的组件

问题描述 投票:0回答:1
  <SideBar />
  <Routes>

    <Route path='/' element={<Body />}>
      <Route path='/' element={<Home />} />
      <Route path='setting' element={<Setting />} />
    </Route>

    <Route path='/service' element={<ServiceLayout />}>
      <Route path='/service' element={<Service />} />
    </Route>
  </Routes>

  <Article />
</div>

我不想在服务组件中渲染文章组件。我怎么做?请帮助我。

reactjs react-router nested-routes multipage
1个回答
0
投票

Article
组件无条件在路由内容下渲染。

<div className='App'>
  <SideBar />
  <Routes>
    <Route element={<Body />}>
      <Route path='/' element={<Home />} />
      <Route path='setting' element={<Setting />} />
    </Route>

    <Route path='/service' element={<ServiceLayout />}>
      <Route index element={<Service />} />
    </Route>
  </Routes>

  <Article /> // <-- always rendered!
</div>

简单的解决方案就是从 JSX 中删除

Article

<div className='App'>
  <SideBar />
  <Routes>
    <Route element={<Body />}>
      <Route path='/' element={<Home />} />
      <Route path='setting' element={<Setting />} />
    </Route>

    <Route path='/service' element={<ServiceLayout />}>
      <Route index element={<Service />} />
    </Route>
  </Routes>

  {/* <Article /> removed */}
</div>

但这可能不是您真正想要的。另一种选择是有条件地在路线上渲染它。

示例:

<div className='App'>
  <SideBar />
  <Routes>
    <Route element={<Body />}>
      <Route path='/' element={<Home />} />
      <Route path='setting' element={<Setting />} />
    </Route>

    <Route path='service' element={<ServiceLayout />}>
      <Route index element={<Service />} />
    </Route>
  </Routes>

  <Route path='article' element={<Article /> } /> // <-- only on "/article" path
</div>
© www.soinside.com 2019 - 2024. All rights reserved.