如何操作1)。放一个div，2)。是否在v6中使用Reaction路由器呈现不带布线的组件？

我希望在<Routes>中放置一个div，并在<Routes>中呈现一个<Topbar />和<Sidebar />组件，而不为它们添加<Route>标记。

我的代码如下：-

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="login" element={<Login />} />
        <Topbar />
        <div className="container">
          <Sidebar />
          <Route path="/" element={<Home />} />
          <Route path="users" element={<UserList />} />
        </div>
      </Routes>
    </Router>
  );
};

我想为所有的路由实现<Topbar />和<Sidebar />。 但登录页面例外(登录页面不应显示Topbar和Sidebar)。 这就是为什么我将登录路径放在Topbar和Sidebar的顶部。

控制台显示错误为：

未捕获错误：[topbar]不是<Route>组件。<Routes>的所有组件子项必须是<Route>或<React.Fragment>

如何实现此功能？

---

解决方案

仅在react-router-domV6中Route和React.Fragment组件是Routes组件的有效子项。

使用布局组件呈现Topbar和Sidebar组件以及要呈现这些组件的路线的嵌套路线的Outlet。

示例：

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

const Layout = () => (
  <>
    <Topbar />
    <div className="container">
      <Sidebar />
      <Outlet />
    </div>
  </>
);

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="users" element={<UserList />} />
        </Route>
      </Routes>
    </Router>
  );
};