侧栏实现：[路由]不是<Route>组件。<Routes>的所有组件子组件都必须是<Route>

Question

我正在尝试实现一个SideBar，但将它排除在/login路由之外。

我的代码现在看起来一团糟，我不太清楚为什么我现在会收到这个错误。

这就是我现在想做的：

App.js：

<Router>
    <div className="App">
        <SideBar
            onCollapse={(inactive) => {
                console.log(inactive);
                setInactive(inactive);
            }}
        />
        <div className={`container ${inactive ? "inactive" : ""}`}>
            {menuItems.map((menu, index) => (
                <>
                    <Route key={menu.name} exact={menu.exact} path={menu.to}>
                        <h1>{menu.name}</h1>
                    </Route>
                    {menu.subMenus && menu.subMenus.length > 0
                        ? menu.subMenus.map((subMenu, i) => (
                            <Route key={subMenu.name} path={subMenu.to}>
                                <h1>{subMenu.name}</h1>
                            </Route>
                        ))
                        : null}
                </>
            ))}
            <Routes>
                <Route exact path="/login" element={<Login />} />
                <Route exact path='/' element={<ProtectedRoutes />}>
                    <Routes>
                        <Route exact path='/main' element={<Main />} />
                    </Routes>
                </Route>
            </Routes>
        </div>
    </div>
</Router>

menuItems：

export const menuItems = [
    {
        name: "Dashboard",
        exact: true,
        to: "/",
        iconClassName: "bi bi-speedometer2",
    },
    {
        name: "Content",
        exact: true,
        to: `/content`,
        iconClassName: "bi bi-speedometer2",
        subMenus: [
            { name: "Courses", to: "/content/courses" },
            { name: "Videos", to: "/content/videos" },
        ],
    },
    { name: "Design", to: `/design`, iconClassName: "bi bi-vector-pen" },
    {
        name: "Content 2",
        exact: true,
        to: `/content-2`,
        iconClassName: "bi bi-speedometer2",
        subMenus: [
            { name: "Courses", to: "/content-2/courses" },
            { name: "Videos", to: "/content-2/videos" },
        ],
    },
    { name: "Design 2", to: `/design-2`, iconClassName: "bi bi-vector-pen" },
    { name: "Design 3", to: `/design-3`, iconClassName: "bi bi-vector-pen" },
    { name: "Design 4", to: `/design-4`, iconClassName: "bi bi-vector-pen" },
];

Answer 1

这一问题如下：

<Routes>
  <Route exact path="/login" element={<Login />} />
  <Route exact path='/' element={<ProtectedRoutes />}>
    <Routes> // <-- here!!
      <Route exact path='/main' element={<Main />} />
    </Routes>
  </Route>
</Routes>

如果您只是尝试嵌套路由，那么您不需要额外的Routes组件。只有在呈现呈现后代路由的组件时，才需要Routes组件。

删除Routes

<Routes>
  <Route path="/login" element={<Login />} />
  <Route element={<ProtectedRoutes />}>
    <Route path='/main' element={<Main />} />
  </Route>
</Routes>

如果您想要排除某些路由上的UI组件，那么创建另一个布局路由组件，就像您对ProtectedRoutes所做的那样。

示例：

import { Outlet } from 'react-router-dom';

const SideBarLayout = ({ inactive, setInactive }) => (
  <>
    <SideBar
      onCollapse={(inactive) => {
        console.log(inactive);
        setInactive(inactive);
      }}
    />
    <div className={`container ${inactive ? "inactive" : ""}`}>
      {menuItems.map((menu) => (
        <React.Fragment key={menu.name}>
          <Link to={menu.to}>
            <h1>{menu.name}</h1>
          </Link>
          {menu?.subMenus?.map((subMenu) => (
            <Link key={subMenu.name} to={subMenu.to}>
              <h1>{subMenu.name}</h1>
            </Link>
          ))}
        </React.Fragment>
      ))}
    </div>
    <Outlet />
  </>
);

..。

<Routes>
  <Route path="/login" element={<Login />} />
  ... other routes w/o SideBar ...

  <Route element={<SideBarLayout {...{ inactive, setInactive }} />}>
    ... other routes with SideBar ...

    <Route element={<ProtectedRoutes />}>
      <Route path='/main' element={<Main />} />
      ... other protected routes ...
    </Route>
  </Route>
</Routes>

Answer 2

尝试在路由器标记之间包装，如下所示：

<Router>
         <Route exact path="/login" element={<Login />} />
                <Route exact path='/' element={<ProtectedRoutes />}>
                    <Routes>
                        <Route exact path='/main' element={<Main />} />
                    </Routes>
                </Route>
      </Router>