はじめに

今回は、Viteで作成したReact TypescriptのプロジェクトでRouterを導入していきたいと思います。

前提

React Typescriptのプロジェクトがある

使うもの

今回使うのは以下の２つです

@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. 遷移するページコンポーネントを作成する

ここでは適当に２つのページコンポーネントを作成します。

１つはデフォルトの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のテキストリンクをクリックすると、元のページに遷移しました！

成功です 👍

React TypescriptでRouterを導入する