React-Router) nested routing

まず、ネストされたルーティングを表示する前に、いくつかのコンポーネントを理解する必要があります.
まさに

< Outlet / >

Outlet素子は何ですか?Jaeme.devのブログを参考にしました

Data.jsx

let invoices = [
    {
      name: "Santa Monica",
      number: 1995,
      amount: "$10,800",
      due: "12/05/1995",
    },
    {
      name: "Stankonia",
      number: 2000,
      amount: "$8,000",
      due: "10/31/2000",
    },
    {
      name: "Ocean Avenue",
      number: 2003,
      amount: "$9,500",
      due: "07/22/2003",
    },
    {
      name: "Tubthumper",
      number: 1997,
      amount: "$14,000",
      due: "09/01/1997",
    },
    {
      name: "Wide Open Spaces",
      number: 1998,
      amount: "$4,600",
      due: "01/27/1998",
    },
  ];
  
  export function getInvoices() {
    return invoices;
  }

  export function getInvoice(number) {
    return invoices.find(
      (invoice) => invoice.number === number
    );
  }

app.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Hello from './page/hello.jsx';
import Invoices from './page/invoices.jsx';
import Invoice from './route/invoice.jsx'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<App />} />
          <Route path="/hello" element={<Hello />} />

          <Route path="/invoices" element={<Invoices />}>
            <Route path=":invoiceId" element={<Invoice />} />
          </ Route>

          <Route
            path="*"
            element={
              <main style={{ padding: "1rem" }}>
                <p>There's nothing here!</p>
              </main>
            }
          />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

app.jsをよく見ると、もう一つルートラベルで包まれたルートラベルがあります.ルータの最新バージョンでサポートされているネストされたルーティングに応答します.サブラベルで記入するのは直感的です.

invoices.js

import React from 'react';
import { getInvoices } from '../data/data';
import { Link, Outlet } from 'react-router-dom';

const invoices = () => {

    let invoices = getInvoices();

    return (
        <div style={{ display: "flex" }}>
        <nav
          style={{
            borderRight: "solid 1px",
            padding: "1rem",
          }}
        >
          {invoices.map((invoice) => (
            <Link
              style={{ display: "block", margin: "1rem 0" }}
              to={`/invoices/${invoice.number}`}
              key={invoice.number}
            >
              {invoice.name}
            </Link>
          ))}
        </nav>
        <Outlet />
      </div>
    )
}

export default invoices

今、私はここでデータを受信してあなたに送信します.

import { getInvoices } from '../data/data'

rogetInvoices関数(data)をインポートします.
変数を作成し、getInvoices関数を実行してデータを返します.

.mapメソッドを使用してデータを巡回し、invoiceのnameのみを返します。

再インデックス.jsでネストされたルーティングをどのように実現したかを考えてみましょう.
invoices.jsxでは、

          {invoices.map((invoice) => (
            <Link
              style={{ display: "block", margin: "1rem 0" }}
              to={`/invoices/${invoice.number}`}
              key={invoice.number}
            >
              {invoice.name}
            </Link>
          ))}

もう1つのリンクは、to={/請求書/${invoice.number}でルーティングされます.
ここで思い出すのはindex.jsでネストされたルーティングを実現するラベルです.

invoice.jsx

import { useParams } from "react-router-dom";
import { getInvoice } from '../data/data'
export default function Invoice() {
    
    let params = useParams();

    let invoice = getInvoice(parseInt(params.invoiceId, 10));


    return (
    <main style={{ padding: "1rem" }}>
        <h2>Total Due: {invoice.amount}</h2>
        <p>
          {invoice.name}: {invoice.number}
        </p>
        <p>Due Date: {invoice.due}</p>
      </main>
    )
  }

ここのuseParamsは何ですか?
userParamsはreact-routerのhookです.

=「urlpathをお持ちですか?params変数に保存しておきます~」

また、ルートタグにはparams.invoiceIdのnumber値ではなく、ルートタグのpath値をネストする必要があります。画面でレンダリングするオブジェクトを返してください。

:invoiceIdはキーで、値はparamsです.InvoiceIdという名前ですか?

data.js

  export function getInvoice(number) {
    return invoices.find(
      (invoice) => invoice.number === number
    );
  }

data.jsではfindメソッドはparamsである.invoiceId値と一致するオブジェクトを返します.
では、領収書です.jsでは、オブジェクトを受信して画面に描画します.