React: React Router の使い方

こちらのプログラムを参考にしました。
learning-react-2e-ja/chapter-11/11.1/src/

create-react-app のインストール

sudo npm install -g create-react-app

プロジェクトの作成

create-react-app ex01
cd ex01
yarn add react-router-dom
yarn start

インストールされた　react-router-dom　のバージョン

$ grep react-router-dom package.json 
    "react-router-dom": "^6.3.0",

src/index.js

import React from "react";
import { render } from "react-dom";
import App from "./App";
import './index.css';

import { BrowserRouter as Router } from "react-router-dom";

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

src/App.js

// ---------------------------------------------------------------
//	App.js
// ---------------------------------------------------------------
import React from "react";
import { useRoutes } from "react-router-dom";
import {
  Home,
  Khm027,
  Khm012,
  Khm024,
  Khm050,
  Whoops404,
  German,
  English,
  Japanese
} from "./pages";

// ---------------------------------------------------------------
function App() {
  let element = useRoutes([
    { path: "/", element: <Home /> },
    {
      path: "khm027",
      element: <Khm027 />,
      children: [
        {
          path: "german", element: <German />
        },
        { path: "english", element: <English /> },
        {
          path: "japanese", element: <Japanese />
        }
      ]
    },
    { path: "khm012", element: <Khm012 /> },
    { path: "khm024", element: <Khm024 /> },
    { path: "khm050", element: <Khm050 /> },
    { path: "*", element: <Whoops404 /> },
    {
      path: "services",
      redirectTo: "about/services"
    }
  ]);
  return element;
}

export default App;

// ---------------------------------------------------------------

src/pages.js

// ---------------------------------------------------------------
// ---------------------------------------------------------------
import React from "react";
import {
  Link,
  useLocation,
  Outlet
} from "react-router-dom";

// ---------------------------------------------------------------
export function Home() {
  return (
    <div>
      <h1>[グリムの昔話]</h1>
      <nav>
        <Link to="khm027">KHM027</Link>
        <Link to="khm012">KHM012</Link>
        <Link to="khm024">KHM024</Link>
        <Link to="khm050">KHM050</Link>
      </nav>
    </div>
  );
}

// ---------------------------------------------------------------
export function Khm027() {
  return (
    <div>
      <h1>[KHM027]</h1>
	<p>ブレーメンの音楽隊</p>
      <Outlet />
      <nav>
        <Link to="german">Deutsch</Link>
        <Link to="english">English</Link>
        <Link to="japanese">日本語</Link>
      </nav>
    </div>
  );
}

// ---------------------------------------------------------------
export function German() {
  return (
    <section>
      <h2>Deutsch</h2>
      <p>
        Die Bremer Stadtmusikanten
      </p>
    </section>
  );
}

// ---------------------------------------------------------------
export function English() {
  return (
    <section>
      <h2>English</h2>
      <p>
	The Bremen town musicians
      </p>
    </section>
  );
}

// ---------------------------------------------------------------
export function Japanese() {
  return (
    <section>
      <h2>日本語</h2>
      <p>
	ブレーメンの音楽隊
      </p>
    </section>
  );
}

// ---------------------------------------------------------------
export function Khm012() {
  return (
    <div>
      <h1>[KHM012]</h1>
<p>ラプンツェル</p>
    </div>
  );
}

// ---------------------------------------------------------------
export function Khm024() {
  return (
    <div>
      <h1>[KHM024]</h1>
<p>ホレおばさん</p>
    </div>
  );
}

// ---------------------------------------------------------------
export function Khm050() {
  return (
    <div>
      <h1>[KHM050]</h1>
<p>いばらひめ</p>
    </div>
  );
}

// ---------------------------------------------------------------
export function Whoops404() {
  let location = useLocation();
  console.log(location);
  return (
    <div>
      <h1>
        Resource not found at {location.pathname}
      </h1>
    </div>
  );
}

// ---------------------------------------------------------------

src/index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

h1 {
  text-align:center;
  color: rgb(112, 128, 144);
}

nav {
  text-align:center;
  position: absolute;
  top: 100px;
  top: 200px;
  left: 20px;
  right: 20px;
  background-color: rgb(112, 128, 144);
  padding: 10px;
}


nav > a {
  margin: 20px;
  color: white;
}

ブラウザーで、http://localhost:3000　にアクセス