はじめに
今回は、Viteで作成したReact TypescriptのプロジェクトでRouterを導入していきたいと思います。
前提
- React Typescriptのプロジェクトがある
使うもの
今回使うのは以下の2つです
- @types/react-router-dom
- react-router-dom
やること
- @types/react-router-domとreact-router-domをインストール
- 遷移するページコンポーネントを作成する
- Routing設定を行う
- ブラウザで試してみる
1. @types/react-router-domとreact-router-domをインストール
以下のコマンドを実行してインストールします。
$ yarn add react-router-dom @types/react-router-dom
2. 遷移するページコンポーネントを作成する
ここでは適当に2つのページコンポーネントを作成します。
1つはデフォルトのApp.tsxを使います
import { useState } from 'react'
import reactLogo from '../assets/react.svg'
import '../App.css'
import { Link } from 'react-router-dom'
const App: React.FunctionComponent = () => {
const [count, setCount] = useState(0)
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src="/vite.svg" className="logo" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank" rel="noreferrer">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR!!
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
<Link to="/abc"><p>To ABC Page</p></Link> # ここに別のページに遷移するリンクを置いています
</div>
)
}
export default App
- 遷移先のAbcコンポーネントを作成します
import { Link } from "react-router-dom"
const Abc: React.FunctionComponent = () => {
return (
<div className="App">
<p>This is abc Page</p>
<Link to="/"><p>To Top Page</p></Link>
</div>
)
}
export default Abc
これでページコンポーネントの作成が完了です。
次はこのコンポーネントのURLを設定します。
3. Routing設定を行う
main.tsxを使ってRouting設定を行います。
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import App from './pages/App'
import Abc from './pages/Abc'
import './index.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
# ここから
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/abc" element={<Abc />} />
</Routes>
</BrowserRouter>
# ここまでがRouting設定
</React.StrictMode>
)
見ての通り、/
ならAppコンポーネント
に遷移し、/abc
ならAbcコンポーネント
に遷移するように設定しております。
ではブラウザで確認してみましょう!
4. ブラウザで試してみる

画面の To ABC Page
というテキストリンクをクリックしてみます

画面遷移に成功しました!
To Top Page
のテキストリンクをクリックすると、元のページに遷移しました!
成功です 👍