React Router报错Topbar非Route组件 如何配置Topbar与Sidebar

React Router v6 对<Routes>的直接子元素有严格校验，只允许存在<Route>组件或者<React.Fragment>（即<>...</>空标签）。你当前代码里把<Topbar>、带类名的容器div、<Sidebar>这些非路由组件直接放在了<Routes>的子级，直接触发了类型校验报错。

用嵌套路由+公共布局的写法重构，把通用的Topbar、Sidebar从Routes直接子级移出，通过路由出口渲染对应页面：

• 单独封装后台通用布局组件，把Topbar、Sidebar放在布局里，用React Router提供的<Outlet />组件作为子页面的渲染占位
• 所有需要展示Topbar、Sidebar的业务路由，全部作为布局路由的子路由存在
• 登录页这类不需要通用布局的路由，保持独立路由配置即可
• 原有的admin权限判断逻辑完全保留，非管理员状态下整个后台路由组不渲染，和你原本的权限逻辑一致

import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom'

// 后台公共布局组件
const AdminLayout = () => {
  return (
    <>
      <Topbar />
      <div className="container">
        <Sidebar />
        {/* 匹配到的子路由页面会渲染在这个位置 */}
        <Outlet />
      </div>
    </>
  )
}

// 路由渲染部分
return (
  <Router>
    <Routes>
      <Route path="/login" element={<Login />} />
      {admin && (
        <Route element={<AdminLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/users" element={<UserList />} />
          <Route path="/user/:userId" element={<User />} />
          <Route path="/newUser" element={<NewUser />} />
          <Route path="/products" element={<ProductList />} />
          <Route path="/product/:productId" element={<Product />} />
          <Route path="/newproduct" element={<NewProduct />} />
        </Route>
      )}
    </Routes>
  </Router>
)

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