[React]Router設定

目次

• はじめに
• インストール
• プロジェクト内での作成

はじめに

今回は、ReactのRouter設定のフローを紹介する

インストール

react-router-domをインストールする

npm install react-router-dom

プロジェクト内での作成

• srcフォルダ配下にrouterフォルダを作成
• Router.tsxを作成

import { memo, type FC } from "react";
import { Route, Routes } from "react-router-dom";

export const Router: FC = memo(() => {
    return (
        <Routes>
            <Route path="/" element={<??? />} />
        </Routes>
    )
})

• App.tsxを以下のように変更する

import { BrowserRouter } from 'react-router-dom';
import { Router } from './router/Router';

export const App = () => {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
    );
};