如何 1). 放置一个 div ，2)。在 v6 React 中使用 React Router 渲染 <Routes> 内没有 Route 的组件？

Question

我想在里面放一个 div<Routes> 并在里面渲染一个<Topbar />和<Sidebar />组件<Routes>而不<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>

如何实现这个功能呢？

Answer 1

react-router-dom仅在v6 中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>
  );
};