<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>
我不想在服务组件中渲染文章组件。我怎么做？请帮助我。
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>