React: React Router の使い方 (その 2)

こちらのページを参考にしました。
【最新バージョン対応】React Routerの使い方を解説

プロジェクトの作成

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

src のツリー構造

$ tree src
src
├── App.css
├── App.js (修正）
├── App.test.js
├── Home.js (追加)
├── Login.js (追加)
├── NotFound.js (追加)
├── Register.js (追加)
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

src/Home.js

/*  Home.js */

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

const Home = () => {
  return (
    <>
      <h1>ホーム</h1>
<blockquote>
      <div>
	ログインは<Link to={"/login"}>こちら</Link>
      </div>
<br />
      <div>
        新規登録は<Link to={"/register"}>こちら</Link>
      </div>
</blockquote>
    </>
  );
};

export default Home;

src/Login.js

/* Login.js */

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

const Login = () => {
  return (
    <>
      <h1>ログインページ</h1>
<blockquote>
      <div>
        新規登録は<Link to={"/register"}>こちら</Link>
      </div>
<br />
      <div>
        <Link to={"/"}>ホームに戻る</Link>
      </div>
</blockquote>
    </>
  );
};

export default Login;

src/Register.js

/* Register.js */

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

const Register = () => {
  return (
    <>
      <h1>新規登録ページ</h1>
<blockquote>
      <div>
        ログインは<Link to={"/login"}>こちら</Link>
      </div>
<br />
      <div>
        <Link to={"/"}>ホームに戻る</Link>
      </div>
</blockquote>
    </>
  );
};

export default Register;

src/NotFound.js

/* NotFound.js */

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

const NotFound = () => {
  return (
    <>
      <h1>お探しのページは見つかりませんでした。</h1>
<blockquote>
      <div>
        <Link to={"/"}>ホームに戻る</Link>
      </div>
</blockquote>
    </>
  );
};

export default NotFound;

src/App.js

// ---------------------------------------------------------------
//	App.js
// ---------------------------------------------------------------
/* App.js */

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Register from "./Register";
import Login from "./Login";
import NotFound from "./NotFound";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={"/"} element={<Home />} />
        <Route path={"/register"} element={<Register />} />
        <Route path={"/login"} element={<Login />} />
	    <Route path={"*"} element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

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

関連情報

React: React Router の使い方