Reactにてサイト構築youtube参考に第一回react-router-domを使う例

まずはreactアプリ生成。名前はYoutubeに合わせました。
参考サイト：https://www.youtube.com/watch?v=8GerqxPcT5g
コマンドにて適当なフォルダ下に、下記実行。

npx create-react-app udemy-household-app --template typescript

下記サイトより開発rectプロジェクトへreact-router-domインストール。
https://www.npmjs.com/package/react-router-dom

npm i react-router-dom

AIによるnpmとは？を下記に記載。
AI による概要
Reactのnpmとは、「Node Package Manager」の略で、Reactのプロジェクトに必要なライブラリ（パッケージ）を管理・インストールするためのツールです。Node.jsと一緒にインストールされ、npm installコマンドでパッケージを導入したり、npm run startで開発サーバーを起動したりと、React開発の基盤として日常的に使用されます。
React開発におけるnpmの役割
パッケージのインストールと管理: React本体やその他のライブラリ（例: Redux、router）を、コマンド一つでプロジェクトに簡単に追加できます。
依存関係の解決: 複数のパッケージが互いに依存している場合に、依存関係や競合を自動的に解決してくれます。
プロジェクトの再現: package.jsonというファイルがプロジェクトの依存関係やスクリプトを記録し、他の開発者が同じ環境を簡単に再現できるようにします。
開発コマンドの実行: npm runコマンドを使って、ビルドやテスト、開発サーバーの起動などのタスクを効率的に実行できます。
npmの主な使い方
プロジェクト作成: npx create-react-appのようなコマンドで、Reactプロジェクトの雛形を作成します。
パッケージのインストール: npm install で必要なライブラリをインストールします。
プロジェクトの実行: npm run startで、開発用サーバーを起動します。
設定ファイルの作成: npm initコマンドでpackage.jsonファイルを作成し、プロジェクトの設定を行います。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

上記App.tsxを下記の様に変更。コンポーネントHomeとReportは作られるまでエラー表示。

import React from 'react';
import './App.css';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route  path="/" element={<Home />}/>
        <Route  path="/report" element={<Report />}/>
        <Route  path="/*" element={<NoMatch />}/> //上記以外のパスエラー表示用
      </Routes>
    </Router>
  );
}

export default App;

コンポーネントHomeとReportを作成。
更にHomeとReportをサイドバーに表示する。まずそのコンポーネントAppLayoutを作成。

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<AppLayout />}>
          <Route  index element={<Home />}/> //path="/"をindexに変更。
          <Route  path="/report" element={<Report />}/>
          <Route  path="/*" element={<NoMatch />}/>
        </Route>

      </Routes>
    </Router>
  );
}

srcの直下にcomponents更にその下にlayoutフォルダ作成その中にAppLayout.tsx作成。
|--components/layout--AppLayout.tsx

中身は下記の様に。

import React from 'react'
import { Outlet } from 'react-router-dom'

const AppLayout = () => {
  return (
    <> //下記タグが複数になった場合空のタグで囲む必要あり。
    <div>AppLayout</div>
    <Outlet /> //Outlet関数挿入。
    </>

  )
}

export default AppLayout

AI による概要
react outlet関数は、コンポーネントのことで、React Routerライブラリの一部として使われます。これは親ルートコンポーネント内で、子ルートに対応するコンポーネントをレンダリングする場所を指定する役割を持ちます。

ブラウザにてここまでの確認。
http://localhost:3000/

http://localhost:3000/report

第一回ここまで。