React-router-dom v6 錯誤：沒有路由匹配位置

Question

我正在嘗試為管理員網頁構建路由。 我正在使用 React-Router-Dom v6，ReactJs。

下面是我的代碼：

index.js：（只是路由代碼）

import { BrowserRouter } from "react-router-dom";
.
.
.
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

應用程序.js

import { Route, Routes } from "react-router-dom";
function App() {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <PrivateRoute>
            <Home/>
          </PrivateRoute>
        }
      />

      <Route path="/login" element={<LoginForm />} />
    </Routes>
  );
}

export default App;

Home.js（只是路線的代碼）：

import { Routes, Route,Link} from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;

function Home() {
  const { Header, Content, Footer, Sider } = Layout;
  const itemLabel = [
    "Dashboard",
    "Quản lý người dùng",
    "Quản lý đơn hàng",
    "Quản lý sản phẩm",
    "Companies",
    "Promotion",
    "Email Template",
    "Postal Code",
  ];

  // define link for route
  const links = [
    "/",
    "/user",
    "/order",
    "/product",
    "/promo",
    "/template",
    "/#",
    "/#",
  ];

  return (
    <Layout hasSider id="components-layout-demo-fixed-sider">
      {/* Route should be wrapper here */}

      {/* left sidebar */}

      <Sider>
        {/* menu of sidebar */}
        <Menu theme="dark" mode="inline" defaultSelectedKeys={["0"]}>
          {items.map((item, index) => (
            <Menu.Item key={index}>
              <Link to={links[index]}>
                {item.icon} <span>{item.label}</span>
              </Link>
            </Menu.Item>
          ))}
        </Menu>
      </Sider>

      {/* Main Layout */}
      <Layout>
        {/* Header of page */}
        <AppHeader />

        <Content>
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/user" element={<UserManagement />} />
              <Route path="/order" element={<OrderManagement />} />
              <Route path="/product" element={<ProductManagement />} />
              <Route path="/order/detail" element={<OrderDetails />} />
              <Route path="/product/detail" element={<ProductDetails />} />
            </Routes>
        </Content>

        {/* Footer of page */}
        <Footer
          style={{
            textAlign: "center",
          }}
        >
          Hook Shopee Services @2022 created by Mr Tuyen
        </Footer>
      </Layout>
    </Layout>
  );
}

export default Home;

所以我的問題是：當我登錄時，它完全重定向到主頁，路由是“/”並渲染儀表板，一切都成真了。

之后，當我單擊側邊欄中的第二個項目（儀表板旁邊和下方的項目：“Quản lý người dùng”）時，發生錯誤，網址為“/user”，但它什么也不渲染。 和控制台警告：沒有路線匹配位置“/用戶”

希望你的幫助。 非常感謝，我總是歡迎每個重構我的代碼的建議（我是 React-router-dom 的新手，對這段代碼不太自信）

Answer 1

從我所看到的您正在使用嵌套路由，因此您需要為要顯示這些數據的位置調用 Outlet 組件，但是如果您對嵌套路由不感興趣，只需在 app.js 和 wrapp 中定義所有路由您的 app.js 與布局和其他東西