未捕獲的錯誤：[Topbar] 不是<route>零件。 的所有子組件<routes>必須是<route>或者<react.fragment></react.fragment></route></routes></route>

Question

我查看了之前的問題並搜索了答案，我想我幾乎知道這里的問題是什么，但不知道如何解決它。

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>

請告訴我如何在此處設置頂部和滑動條組件。 請求我的程序員同事看看這個並提前致謝。

Answer 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 組件。

Answer 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;

Answer 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>
  ); ```

Answer 4

渲染一個沒有頂欄和側邊欄的登錄頁面創建一個私有路由器組件並將它包裹在你想要使用react-outlet渲染頂欄和側邊欄的所有路由上

這是對我有用的 app.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;