React Router v6 入門：Routes・Link・useNavigateの使い方

React Routerとは

React RouterはReactアプリにルーティング（URLに応じて表示するコンポーネントを切り替える）を追加するライブラリです。v6からAPIが大幅に変わり、よりシンプルに書けるようになりました。

インストール

npm install react-router-dom

基本的な使い方

// src/main.tsx
import { BrowserRouter } from 'react-router-dom'

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

// src/App.tsx
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import NotFound from './pages/NotFound'

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

Linkでページ遷移する

<a> タグの代わりに <Link> を使います。ページ全体のリロードなしで遷移できます。

import { Link } from 'react-router-dom'

function Nav() {
  return (
    <nav>
      <Link to="/">ホーム</Link>
      <Link to="/about">About</Link>
    </nav>
  )
}

useNavigateでプログラム遷移

ボタンクリックや処理後の遷移など、JSのコードから遷移する場合は useNavigate を使います。

import { useNavigate } from 'react-router-dom'

function LoginForm() {
  const navigate = useNavigate()

  const handleSubmit = async () => {
    await login()
    navigate('/dashboard') // ログイン後にダッシュボードへ
  }

  return <button onClick={handleSubmit}>ログイン</button>
}

// 戻る
navigate(-1)

// 置き換え（ブラウザの履歴に残さない）
navigate('/login', { replace: true })

URLパラメータを取得する

// ルート定義
<Route path="/users/:id" element={<UserDetail />} />

import { useParams } from 'react-router-dom'

function UserDetail() {
  const { id } = useParams<{ id: string }>()
  return <p>ユーザーID: {id}</p>
}

クエリパラメータを取得する

import { useSearchParams } from 'react-router-dom'

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams()
  const query = searchParams.get('q') ?? ''

  return (
    <div>
      <p>検索ワード: {query}</p>
      <button onClick={() => setSearchParams({ q: 'react' })}>
        reactで検索
      </button>
    </div>
  )
}

ネストしたルート

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route index element={<DashboardHome />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  )
}

import { Outlet } from 'react-router-dom'

function Dashboard() {
  return (
    <div>
      <h1>ダッシュボード</h1>
      <Outlet /> {/* 子ルートがここに描画される */}
    </div>
  )
}

よく使うフックとコンポーネント

API	用途
`<BrowserRouter>`	ルーター全体のラッパー
`<Routes>` / `<Route>`	ルートの定義
`<Link>`	リンク（ページ遷移）
`<NavLink>`	アクティブ状態を持つリンク
`<Outlet>`	子ルートの描画位置
`useNavigate`	プログラム遷移
`useParams`	URLパラメータの取得
`useSearchParams`	クエリパラメータの取得

まとめ

BrowserRouter でアプリを囲む
Routes + Route でURLとコンポーネントを対応付ける
遷移は Link か useNavigate
URLパラメータは useParams、クエリは useSearchParams

型安全なルーティングには TanStack Router も選択肢になります。

Reactのプロジェクト作成から始める場合は「React + Vite でプロジェクト作成」を参照してください。

TypeScriptで型安全にルーティングしたい場合は「TanStack Router 入門」を参照してください。