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

【问题标题】：Uncaught Error: [Topbar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>未捕获的错误：[Topbar] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>
【发布时间】：2022-08-14 18:29:25
【问题描述】：

我查看了以前的问题并搜索了答案，我想我几乎知道这里的问题是什么，但不知道如何解决它。

return (
    <Router>
      <Routes>
        <Route path=\"/login\" element={<Login />} />
        {admin && (
          <>
            <Topbar />
            <div className=\"container\">
              <Sidebar />
              <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 />} />
            </div>
          </>
        )}
      </Routes>
    </Router>

请告诉我如何在此处设置顶部和滑动条组件。请求我的程序员同事看看这个并提前致谢。

标签： javascript reactjs mern

【解决方案1】：

错误很明显，您只能使用<Route /> 标签，同时删除<div className="container">。尝试这个：

    return (
        <>
          <Topbar />
          <Sidebar />
          <Router>
            <Routes>
              <Route path="/login" element={<Login />} />
              {admin && (
                  <>  
                    <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 />} />
                  </>
              )}
            </Routes>
          </Router>
        </>
)

或者，您可以在每个其他组件中导入您的 TOPBAR 和 SIDEBAR 组件。

【讨论】：

两者都不是解决方案，但我移动了 <Topbar /><Sidebar /> 这些在 <Router> 中，然后显示

【解决方案2】：

import React from "react";
import { Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import UserList from "./UserList";
import NewUser from "./NewUser";
import ProductList from "./ProductList";
import Product from "./Product";
import NewProduct from "./NewProduct";
import Login from "./Login";
const AppRoute = () => {
  return (
    <>
      {admin ? (
        <Router>
          <Routes>
            <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 />} />
          </Routes>
        </Router>
      ) : (
        <Router>
          <Routes>
            <Route path="/" element={<Login />} />
          </Routes>
        </Router>
      )}
    </>
  );
};
export default AppRoute;

【讨论】：

请分享一些关于错误和变化的cmets
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

  const admin = JSON.parse(
    JSON.parse(localStorage.getItem("persist:root")).user
  ).currentUser.isAdmin;

  return (
    <Router>
      <>
        <Topbar />
        <div className="container">
          <Sidebar />
          <Routes>
            <Route
              path="/login"
              element={admin ? <Navigate to="/" /> : <Login />}
            />

            <Route exact path="/" element={<Home />}></Route>
            <Route path="/users" element={<UserList />}></Route>
            <Route path="/user/:userId" element={<User />}></Route>
            <Route path="/newUser" element={<NewUser />}></Route>
            <Route path="/products" element={<ProductList />}></Route>
            <Route path="/product/:productId" element={<Product />}></Route>
            <Route path="/newproduct" element={<NewProduct />}></Route>
          </Routes>
        </div>
      </>
    </Router>
  ); ```

【讨论】：

试试这个，它对我有用

【解决方案4】：

渲染一个没有顶栏和侧边栏的登录页面使用react-outlet

这对我有用应用程序.js

import "./App.css";
import Sidebar from "./Components/Sidebar/Sidebar";
import TopBar from "./Components/TopBar/TopBar";
import Home from "./Pages/Home/Home";
import UserList from "./Pages/UserList/UserList";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import User from "./Pages/User/User";
import NewUser from "./Pages/NewUser/NewUser";
import ProductList from "./Pages/ProductList/ProductList";
import Product from "./Pages/Product/Product";
import NewProduct from "./Pages/NewProduct/NewProduct";
import { useSelector } from "react-redux";
import Login from "./Pages/Login/Login";
import { Outlet } from "react-router-dom";

const SidebarLayout = () => (
  <>
    <TopBar />
    <div className="container">
      <Sidebar />
      <Outlet />
    </div>
  </>
);

function App() {
  // const admin = useSelector((state) => state.user.currentUser.isAdmin);
  const admin = JSON.parse(
    JSON.parse(localStorage.getItem("persist:root")).user
  ).currentUser.isAdmin;
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<SidebarLayout />}>
          <Route index element={<Home />} />
          <Route exact path="/users" element={<UserList />} />
          <Route exact path="/users/:id" element={<User />} />
          <Route exact path="/newUser" element={<NewUser />} />
          <Route exact path="/products" element={<ProductList />} />
          <Route exact path="/products/:id" element={<Product />} />
          <Route exact path="/newProduct" element={<NewProduct />} />
        </Route>
        <Route exact path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

【讨论】：