如何在react-router-dom中设置侧边栏仅排除404页面显示？

要解决这个问题，你需要让侧边栏只匹配有效路由路径，而不是用path="*"匹配所有路径（包括404的通配符路径）。这里有两种简洁的修复方式：

方式一：利用布局组件嵌套推荐 #

把侧边栏整合到包裹有效路由的布局组件中，这样只有在渲染有效页面时才会加载侧边栏，404页面单独路由不使用该布局：

import { Routes, Route, Outlet } from 'react-router-dom';

// 定义带侧边栏的布局组件
function BooksLayoutWithSidebar() {
  return (
    <>
      <aside>
        <BookSidebar />
      </aside>
      {/* 用Outlet渲染子路由的内容 */}
      <BooksLayout>
        <Outlet />
      </BooksLayout>
    </>
  );
}

// 路由配置
function App() {
  return (
    <Routes>
      {/* 所有需要显示侧边栏的页面都归到这个布局下 */}
      <Route element={<BooksLayoutWithSidebar />}>
        <Route index element={<BookList />} />
        <Route path=":id" element={<Book />} />
        <Route path="new" element={<NewBook />} />
      </Route>
      {/* 404页面单独配置，不使用带侧边栏的布局 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

方式二：明确列出侧边栏需要匹配的路径 #

如果你不想调整布局结构，可以直接在侧边栏的Routes里列出所有有效路由的路径，替代通配符：

<>  
  <aside>  
    <Routes>
      <Route path="/" element={<BookSidebar />} />
      <Route path="/:id" element={<BookSidebar />} />
      <Route path="/new" element={<BookSidebar />} />
    </Routes>  
  </aside>  
  <Routes>
    <Route element={<BooksLayout />}>
      <Route index element={<BookList />} />  
      <Route path=":id" element={<Book />} />  
      <Route path="new" element={<NewBook />} />  
      <Route path="*" element={<NotFound />} />  
    </Route>
  </Routes>  
</>

为什么原来的写法会失效？ #

你之前用path="*"匹配侧边栏，这个通配符会匹配所有路径，包括404页面的path="*"路由，所以不管是有效页面还是404，侧边栏都会被渲染。上面两种方式都是通过限制侧边栏的匹配范围，让它只对有效路由生效。

内容的提问来源于stack exchange，提问作者markRAD