为什么渲染父组件和子组件会尝试输入子组件 [英] Why is rendering the parent component and the child trying to enter the child component

问题描述

为什么呈现父组件而子组件尝试输入子组件

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

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

http://localhost:3000/dashboard/employee-呈现仪表板和员工视图(两个视图)

http://localhost:3000/dashboard/accounting-呈现仪表板和会计视图(两个视图)

文档：

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

index.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")
);

App.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(带插座)

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

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

export default DashboardHomeView;

组件下级核算

import React from "react";

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

推荐答案

我最初也觉得这有点令人困惑，但对于嵌套路由，父路由更像是布局组件，因为它始终在path匹配时呈现，并将其所有子路由呈现到其出口。

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

您可能已经注意到，当单击链接时，App中的布局 消失了。重复共享布局是一件令人头疼的事情。我们已经 了解到大多数用户界面是一系列嵌套布局，几乎总是 映射到URL的片段，这样这个想法就会被直接植入以做出反应 路由器。

我相信您所期待的就是所谓的<3-2]。当不是布局/包装容器时，它将呈现在"；/dashboard"；路由上。

请注意，它具有index道具，而不是path。那是因为 索引路由共享父级的路径。这就是问题的关键--它 没有路径。

也许你还在挠头。我们尝试了几种方法 要回答什么是索引路线这个问题。希望是其中之一 这些棍子给你：

• 索引路由呈现在父路由路径下的父路由插座中。
• 当父路由匹配，但其他子路由都不匹配时，索引路由匹配。
• 索引路由是父路由的默认子路由。
• 当用户尚未单击导航列表中的某一项时，会呈现索引路线。

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
    </>
  );
};

这篇关于为什么渲染父组件和子组件会尝试输入子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！