React Router v7(ライブラリ利用)を使ったブログサイトの構築ガイド

mkdir react-router-v7-tutorial
cd react-router-v7-tutorial
npx create-vite@latest .

npm install
npm run dev

npm i react-router

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
- import './index.css'
+ import { BrowserRouter } from "react-router";
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
+   <BrowserRouter>
      <App />
+   </BrowserRouter>
  </StrictMode>,
)

export const posts = [
  { id: 1, title: 'React Router 7のセットアップ' },
  { id: 2, title: 'Reactでの状態管理方法' },
  { id: 3, title: 'コンポーネント設計のベストプラクティス' },
]

import { posts } from "../const/posts"

function Home () {
  return (
    <div>
    <h1>ホーム</h1>
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          {post.title}
        </li>
      ))}
    </ul>
  </div>
  )
}

export default Home

import { Routes, Route } from 'react-router'
import Home from './pages/Home'

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

export default App

export const posts = [
  { id: 1, title: 'React Router 7のセットアップ', description: 'セットアップ以外にも様々な機能をご紹介' },
  { id: 2, title: 'Reactでの状態管理方法', description: 'useState、useContextなどをご紹介' },
  { id: 3, title: 'コンポーネント設計のベストプラクティス', description: 'ディレクトリ構成についてもご紹介' },
]

export const getPostById = (id: number) => {
  return posts.find(post => post.id === id);
}

import { useParams } from 'react-router';
import { getPostById } from '../const/posts';

function Post () {
  const { id } = useParams()

  const post = getPostById(Number(id))

  if (!post) {
    return (
      <div>
        投稿が見つかりませんでした。
      </div>
    )
  }

  return (
    <div>
      <h1>{post.title}</h1>
      {post.description}
    </div>
  );
};

export default Post;

import { useParams } from 'react-router';

  const { id } = useParams()

      <Route path="/post/:id" element={<Post />} />

  const post = getPostById(Number(id))

  if (!post) {
    return (
      <div>
        投稿が見つかりませんでした。
      </div>
    )
  }

  return (
    <div>
      <h1>{post.title}</h1>
      {post.description}
    </div>
  );

import { Routes, Route } from 'react-router'
import Home from './pages/Home'
+ import Post from './pages/Post';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
+     <Route path="/post/:id" element={<Post />} />
    </Routes>
  );
}

export default App

import { posts } from "../const/posts"
+ import { Link } from "react-router"

function Home () {
  return (
    <div>
    <h1>ホーム</h1>
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
-        {post.title}
+         <Link to={`/post/${post.id}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  </div>
  )
}

export default Home

- import { useParams } from 'react-router';
+ import { useParams, useNavigate } from 'react-router';
import { getPostById } from '../const/posts';

function Post () {
  const { id } = useParams()
+ const navigate = useNavigate()

  const post = getPostById(Number(id))

  if (!post) {
+   setTimeout(() => {
+     navigate('/')
+   }, 3000)
    return (
      <div>
-       投稿が見つかりませんでした。
+       投稿が見つかりませんでした。トップページに戻ります...
      </div>
    )
  }

  return (
    <div>
      <h1>{post.title}</h1>
      {post.description}
    </div>
  );
};

export default Post;

const Account = () => {
  return <h2>アカウント</h2>
}

export default Account

const Settings = () => {
  return <h2>設定画面</h2>
}

export default Settings

import { Outlet } from "react-router";

function MyPageLayout() {
  const containerStyle: React.CSSProperties = {
    backgroundColor: "#f0f0f0",
    padding: "20px",
    minHeight: "100vh",
  }
  return (
    <div style={containerStyle}>
      <h1>マイページ</h1>
      <Outlet />
    </div>
  );
}

export default MyPageLayout

import { Routes, Route } from 'react-router'
import Home from './pages/Home'
import Post from './pages/Post';
import Account from './pages/Account';
import Settings from './pages/Settings';
+ import MyPageLayout from './pages/MyPageLayout';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/post/:id" element={<Post />} />
-     <Route path="/mypage">
+     <Route path="/mypage" element={<MyPageLayout />}>
        <Route path="account" element={<Account />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

export default App

import { NavLink } from "react-router";
import './styles.css';

export function MyPageNavigation() {
  return (
    <nav>
      <NavLink to="/" end>ホーム</NavLink>
      <NavLink to="/mypage/settings">設定画面</NavLink>
      <NavLink to="/mypage/account">アカウント</NavLink>
    </nav>
  );
}

nav {
  display: flex;
  gap: 16px;
}

a.active {
  color: red;
}

import { Outlet } from "react-router";
+ import { MyPageNavigation } from "./MyPageNavigation";

function MyPageLayout() {
  const containerStyle: React.CSSProperties = {
    backgroundColor: "#f0f0f0",
    padding: "20px",
    minHeight: "100vh",
  }
  return (
    <div style={containerStyle}>
-     <h1>マイページ</h1>
+     <MyPageNavigation />
      <Outlet />
    </div>
  );
}

export default MyPageLayout

import { posts } from "../const/posts"
import { Link } from "react-router"
+ import { MyPageNavigation } from "./MyPageNavigation"

function Home () {
  return (
    <div>
-   <h1>ホーム</h1>
+   <MyPageNavigation />
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link to={`/post/${post.id}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  </div>
  )
}

export default Home