5. SPAの高速表示（react-router-dom）

cd [任意のアプリ名]
npm install react-router-dom

import './App.css';
import About from './About';
import Articlelist from './Articlelist';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <>
      <BrowserRouter> // ひとつのアプリでBrowserRouterタグは1回しか書いてはいけません
        // Linkタグには「URLを変更する」機能しかありません
        // Routeタグをつかうことで「URLが変更された時に何を表示するのか」決めます
        // aタグの代わりにLinkタグを使うことで、リロードせずに差分のみを変更してくれます
        <Link to='/about'></Link>
        <Link to='/articlelist'></Link>
        <Routes>
          <Route path='/about' element={<About />} />
          <Route path='/articlelist' element={<Articlelist />} />
          <Route path='*' element={<p>NOT FOUND PAGE</p>} /> // *は用意されていないURL全般を指します
        </Routes>
      </BrowserRouter>
    </>
  );
}

// src/App.js

import Post from './Post';
<Route path='/posts/:id' element={<Post />} />

// src/Post.jsx
import { useParams } from 'react-router-dom';
return <div>POST ID: {id}</div>;