😽
React Routerのルーティング実装
はじめに
今回紹介するコードの完成形はこちら↓
開発環境
パッケージマネージャー：npm(volta)
バンドラー:Vite
react: 18.2.0
typescript: 5.2.2
react-dom: 18.2.0
react-router-dom: 6.21.2
React Routerとは
React Router は「クライアントサイドルーティング」を有効にします。
React単体にはルーティング機能はないので、いい感じにルーティングを作ってくれるものという認識で最初は大丈夫。
必要なパッケージのインストール
一旦ViteでReactの環境構築を行う。
npm create vite
npm i
環境構築の詳しい内容に関しては公式または下記記事を参照。
React Routerを追加する。
npm install react-router-dom
ルーティングの実装
コンポーネントの作成
ルーティングで使用する任意のコンポーネントを作成する。
Home.tsx
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<div>Home</div>
<Link to='/about'>About</Link>
</div>
)
}
export default Home;
About.tsx
import { Link } from 'react-router-dom';
const About = () => {
return (
<div>
<div>About</div>
<Link to='/'>Home</Link>
</div>
)
}
export default About;
ルーティングの設定
今回はルーティングの設定がわかりやすいように、コンポーネントを切り分けて作成する。
設定は簡単で下記のようにコードを書けば、BrowserRouterがブラウザ内蔵の履歴スタックを使ってルーティングを作成してくれて、/と/aboutの2個のパスが使用可能になる。
main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import AppRoutes from './react-router/AppRoutes.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<AppRoutes />
</React.StrictMode>,
)
AppRoutes.tsx
import {
BrowserRouter,
Route,
Routes
} from "react-router-dom";
import Home from './Home';
import About from './About';
const AppRoutes = () => {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
</Routes>
</BrowserRouter>
)
}
export default AppRoutes;
[補足]ロジックの切り分け
サンプルコードだと、/と/aboutの2個しかパスがないので可読性に問題はないが、パスが100個とかになると可読性が悪くなってしまう。その対策として、pathとelementを変数として切り分ける。
const routes = [
{
path: '/',
Component: Home
},
{
path: '/about',
Component: About
},
] as const satisfies RouteProps[];
※as const satisfiesがわからない方はこちらを参照
切り分けた変数をループで回して処理する。
<Routes>
{routes.map(({ path, Component }, i) => <Route key={i} path={path} element={<Component />} />)}
</Routes>
完成コード
import {
BrowserRouter,
Route,
Routes,
type RouteProps,
} from "react-router-dom";
import Home from './Home';
import About from './About';
const routes = [
{
path: '/',
Component: Home
},
{
path: '/about',
Component: About
},
] as const satisfies RouteProps[];
const AppRoutes = () => {
return (
<BrowserRouter>
<Routes>
{routes.map(({ path, Component }, i) => <Route key={i} path={path} element={<Component />} />)}
</Routes>
</BrowserRouter>
)
}
export default AppRoutes;
以上！
Discussion