ルーティング

React Router ／ Next.js

迷ったらこれ

Next.js

新しく作るなら、ページの切り替えだけでなく、検索に強い作りや公開の仕組みまでそろっている。このサイトも Next.js で作っている

見た目をくらべる

同じものを、それぞれのライブラリで作りました。触ってみてください

React Router

書き方をくらべる

コードを書き換えると、右の見た目が変わります

import { MemoryRouter, Routes, Route, Link, useParams, useLocation } from "react-router"

const items = [
  { slug: "apple", name: "りんご", price: 150 },
  { slug: "orange", name: "みかん", price: 100 },
]

// 見た目（このデモの本題ではない）
const linkStyle = { color: "#18181b", textDecoration: "none", fontSize: 14 }

function Home() {
  return <h2 style={{ margin: 0, fontSize: 18 }}>ホーム</h2>
}

function ItemList() {
  return (
    <div>
      <h2 style={{ margin: "0 0 8px", fontSize: 18 }}>商品一覧</h2>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        {items.map((item) => (
          <li key={item.slug} style={{ padding: "8px 0", borderTop: "1px solid #f4f4f5" }}>
            <Link to={"/items/" + item.slug} style={linkStyle}>
              {item.name} →
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

function ItemDetail() {
  // URL の :slug の部分（例：apple）を取り出す
  const { slug } = useParams()
  const item = items.find((i) => i.slug === slug)

  if (!item) {
    return <p>商品が見つかりません</p>
  }

  return (
    <div>
      <h2 style={{ margin: 0, fontSize: 18 }}>{item.name}</h2>
      <p style={{ margin: "4px 0 12px", color: "#71717a" }}>{item.price}円</p>
      <Link to="/items" style={linkStyle}>← 一覧に戻る</Link>
    </div>
  )
}

// 今の URL を表示する（デモでは URL の欄が見えないので）
function CurrentUrl() {
  const location = useLocation()
  return (
    <span style={{ marginLeft: "auto", padding: "2px 8px", borderRadius: 6, background: "#f4f4f5", color: "#71717a", fontSize: 12, fontFamily: "monospace" }}>
      {location.pathname}
    </span>
  )
}

export default function App() {
  return (
    // MemoryRouter：デモの中だけで URL を切り替える（ふつうのサイトでは BrowserRouter を使う）
    <MemoryRouter>
      <div style={{ maxWidth: 360, margin: "0 auto", border: "1px solid #e4e4e7", borderRadius: 12, fontFamily: "system-ui, sans-serif", overflow: "hidden" }}>
        <nav style={{ display: "flex", alignItems: "center", gap: 16, padding: "10px 16px", borderBottom: "1px solid #f4f4f5" }}>
          <Link to="/" style={linkStyle}>ホーム</Link>
          <Link to="/items" style={linkStyle}>商品一覧</Link>
          <CurrentUrl />
        </nav>

        <div style={{ padding: 16 }}>
          {/* URL と画面の一覧表（path ＝ URL、element ＝ そのとき出す画面） */}
          <Routes>
            {/* 「/」のときは、ホーム */}
            <Route path="/" element={<Home />} />
            {/* 「/items」のときは、商品一覧 */}
            <Route path="/items" element={<ItemList />} />
            {/* 「/items/なんでも」のときは、商品の詳細（:slug ＝ ここに何が入ってもいい） */}
            <Route path="/items/:slug" element={<ItemDetail />} />
          </Routes>
        </div>
      </div>
    </MemoryRouter>
  )
}

Open Sandbox

Next.js で同じものを作ると

app/page.tsx → /

export default function Page() {
  return <h2>ホーム</h2>
}

app/items/page.tsx → /items

import Link from "next/link"
import { items } from "@/data/items"

export default function Page() {
  return (
    <div>
      <h2>商品一覧</h2>
      <ul>
        {items.map((item) => (
          <li key={item.slug}>
            <Link href={"/items/" + item.slug}>{item.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

app/items/[slug]/page.tsx → /items/apple など

import Link from "next/link"
import { notFound } from "next/navigation"
import { items } from "@/data/items"

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  // URL の [slug] の部分（例：apple）を取り出す
  const { slug } = await params
  const item = items.find((i) => i.slug === slug)

  if (!item) {
    notFound()
  }

  return (
    <div>
      <h2>{item.name}</h2>
      <p>{item.price}円</p>
      <Link href="/items">← 一覧に戻る</Link>
    </div>
  )
}

くらべる

2026年10月時点

React Router

公式 ↗

特徴

React のアプリにページの切り替えを足すライブラリ。「この URL ならこの画面」という一覧表を、コードで書く。ページの中身はブラウザで組み立てる

向いている場面

すでにある React のアプリにページを足す。ログインして使う管理画面など、検索に出なくていいアプリ

Next.js

迷ったらこれ公式 ↗

特徴

React でサイトを作るための枠組み。フォルダとファイルの形が、そのまま URL になる（app/basics/page.tsx → /basics）。ページをサーバーで作ってから渡す

向いている場面

検索に出したいサイトを新しく作る。ブログ・お店・サービスの紹介ページなど