React RouterやTanStackを使わないページ移動の実装方法（Code-based routing）
2026.2.18
この記事は約2分で読めます
この記事の筆者：三好アキ
🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／*韓国でも出版）』著者。
▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2
パッケージなしでページを遷移（コードでページを設定）
React（+ Vite）アプリでページ切り替え（ルーティング）を実装する時には、React RouterやTanStack Routerを使うのが一般的です。
しかしこれらを使わずともルーティングは可能なので、その簡単な方法を紹介します。
本記事では、『コードでページを切り替える方法（Code-based routing）』を説明します。
まずはReact + Viteを用意しましょう。
そしてindex.css内のコードはすべて消しておいてください。
（*React + Viteのセットアップについてはこちらの記事をご覧ください）
ページの用意
ページとして「About」、「Home」、そしてページが存在しない場合の「Not Found」のファイルを用意しましょう。
各ファイルには次のように書きます。
// Home.jsx
const Home = () => {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default Home// About.jsx
const About = () => {
return (
<div>
<h1>About</h1>
</div>
)
}
export default About// NotFound.jsx
const NotFound = () => {
return (
<div>
<h1>Not Found</h1>
</div>
)
}
export default NotFoundページ切り替えの仕組みの用意
App.jsxのコードをすべて消したら、次のように書いてください。
// App.jsx
const App = () => {
return
}
export default App現在のページを保存するために、stateを用意します。
// App.jsx
import { useState } from "react" // 追加
const App = () => {
const [path, setPath] = useState(window.location.pathname) // 追加
return
}
export default Appそして、ブラウザのURLの変更を扱う次のコードを追加しましょう。
// App.jsx
import { useEffect, useState } from "react" // 追加
const App = () => {
const [path, setPath] = useState(window.location.pathname)
// ⬇追加
const renderByUrl = () => {
setPath(window.location.pathname)
}
useEffect(() => {
window.addEventListener("popstate", renderByUrl)
return () => window.removeEventListener("popstate", renderByUrl)
}, [])
// ⬆追加
return
}
export default App最後に、先ほど作ったページをURLに合わせて表示するコードを加えます。
// App.jsx
import { useEffect, useState } from "react"
import Home from "./Home" // 追加
import About from "./About" // 追加
import NotFound from "./NotFound" // 追加
const App = () => {
const [path, setPath] = useState(window.location.pathname)
const renderByUrl = () => {
setPath(window.location.pathname)
}
useEffect(() => {
window.addEventListener("popstate", renderByUrl)
return () => window.removeEventListener("popstate", renderByUrl)
}, [])
// ⬇追加
if (path === "/") return <Home />
if (path === "/about") return <About />
return <NotFound />
// ⬆追加
}
export default AppLinkタグの用意
ページを移動するリンクに<a>タグを使い、次のように書くとします。
<a href="/about">About</a>しかしこれではページがリロードされてしまい、SPA（Single Page Application）の特徴である「スムーズなページ遷移」にはなりません。
なので、専用の<Link>タグを用意しましょう。
Link.jsxを作ってください。
次のように書きます。
// Link.jsx
export function Link({ to, children }) {
const handleClick = (e) => {
e.preventDefault()
window.history.pushState({}, "", to)
window.dispatchEvent(new PopStateEvent("popstate"))
}
return (
<a href={to} onClick={handleClick}>
{children}
</a>
)
}
export default Linkそして各ページに読み込みましょう。
// Home.jsx
import Link from "./Link" // 追加
const Home = () => {
return (
<div>
<h1>Home</h1>
<Link to="/about">About</Link> // 追加
</div>
)
}
export default Home// About.jsx
import Link from "./Link" // 追加
const About = () => {
return (
<div>
<h1>About</h1>
<Link to="/home">Home</Link> // 追加
</div>
)
}
export default About// NotFound.jsx
import Link from "./Link" // 追加
const NotFound = () => {
return (
<div>
<h1>Not Found</h1>
<Link to="/home">Home</Link> // 追加
</div>
)
}
export default NotFoundこれで、パッケージを使わない、コードベースでのルーティングをReactに実装できました。
しかしこのようなマニュアル方式には限界もあります。
この実装方法の限界
ページが増えたときにコードも増えていく、動的ルートが扱いづらい、テストが書きづらいといった問題が典型的です。
そのためやはり一般的には、React RouterやTanStack Routerといったパッケージを使うことになります。
▼【無料フロントエンド・ガイド】は下記ページで受け取れます。
🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった！
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
（*名前不要・メールアドレスだけで受け取り可能です）
関連記事
