reactjs - 为什么渲染的是父组件，子组件试图进入子组件

Question

为什么渲染的是父组件，子组件试图进入子组件

"react-router-dom": "^6.0.1",

当我进入路线时:
http://localhost:3000/dashboard- View 工作

http://localhost:3000/dashboard/employee - 渲染仪表板和员工 View (两种 View )

http://localhost:3000/dashboard/accounting - 呈现仪表板和会计 View (两种 View )

文档:

https://reactrouter.com/docs/en/v6/getting-started/tutorial#nested-routes

索引.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

应用程序.js

import AppRouter from "./routers/AppRouter";

function App() {
  return (
    <>
      <AppRouter />
    </>
  );
}

export default App;

AppRouter.js

import { Route, Routes } from "react-router-dom";
import Navbar from "../components/template/Navbar";
import AccountingHomeView from "../components/views/accounting/AccountingHomeView";
import DashboardHomeView from "../components/views/dashboard/DashboardHomeView";
import EmployeeHomeView from "../components/views/employee/EmployeeHomeView";
import HomeView from "../components/views/public/HomeView";
import LoginView from "../components/views/public/LoginView";

const AppRouter = () => {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<HomeView />} />
        <Route path="dashboard" element={<DashboardHomeView />}>
          <Route path="employee" element={<EmployeeHomeView />} />
          <Route path="accounting" element={<AccountingHomeView />} />
        </Route>
        <Route path="/login" element={<LoginView />} />
      </Routes>
    </div>
  );
};
export default AppRouter;

DashboardHomeView.js(带 socket )

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

const DashboardHomeView = function () {
  return (
    <>
      <h1>DashboardHomeView</h1>
      <Outlet />
    </>
  );
};

export default DashboardHomeView;

组件 child 会计

import React from "react";

const AccountingHomeView = function () {
  return (
    <div>
      <h1> Accountin</h1>
    </div>
  );
};
export default AccountingHomeView;

Answer 1

我最初也发现这有点令人困惑，但是对于嵌套路由，“父”路由被认为更像是一个“布局”组件，因为它总是在其 path 匹配时呈现，并呈现它的所有 child 路由到它的导出。

const AppRouter = () => {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<HomeView />} />
        <Route
          path="dashboard"
          element={<DashboardHomeView />} // <-- always matched/rendered at "/dashboard*"
        > 
          <Route
            path="employee"
            element={<EmployeeHomeView />} // <-- conditionally matched/rendered
          />
          <Route
            path="accounting"
            element={<AccountingHomeView />} // <-- conditionally matched/rendered
          />
        </Route>
        <Route path="/login" element={<LoginView />} />
      </Routes>
    </div>
  );
};

const DashboardHomeView = function () {
  return (
    <>
      <h1>DashboardHomeView</h1> // <-- always matched/rendered at "/dashboard*"
      <Outlet /> // <-- conditionally matched/rendered children
    </>
  );
};

Nested-Routes

You may have noticed when clicking the links that the layout in Appdisappears. Repeating shared layouts is a pain in the neck. We'velearned that most UI is a series of nested layouts that almost alwaysmap to segments of the URL so this idea is baked right in to ReactRouter.

我相信您期待的是所谓的 Index Route .当它不是布局/包装器容器时，它将在“/dashboard”路由上呈现。

Notice it has the index prop instead of a path. That's because theindex route shares the path of the parent. That's the whole point--itdoesn't have a path.

Maybe you're still scratching your head. There are a few ways we tryto answer the question "what is an index route?". Hopefully one ofthese sticks for you:

• Index routes render in the parent routes outlet at the parent route's path.
• Index routes match when a parent route matches but none of the other children match.
• Index routes are the default child route for a parent route.
• Index routes render when the user hasn't clicked one of the items in a navigation list yet.

const AppRouter = () => {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<HomeView />} />
        <Route path="dashboard" element={<DashboardLayout />}>
          <Route path="employee" element={<EmployeeHomeView />} />
          <Route path="accounting" element={<AccountingHomeView />} />
          <Route index element={<DashboardHomeView />} />
        </Route>
        <Route path="/login" element={<LoginView />} />
      </Routes>
    </div>
  );
};

const DashboardLayout = function () {
  return (
    <div /* with any layout styling */>
      .... other common layout content
      <Outlet />
      .... more possible common page content
    </div>
  );
};

const DashboardHomeView = function () {
  return (
    <>
      <h1>DashboardHomeView</h1>
      .... dashboard specific content
    </>
  );
};