【初心者】React で新規ページの作成（TypeScript）

新規ページの追加方法について勉強したので、備忘録として記載しておきます。

以下が、勉強として作成したページなので、興味あれば閲覧ください！

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

ReactはSingle Page Applicationを基本とするフレームワークですが、react-router-domをインストールすることで、簡単に新規ページを作成することができます。
インストールは、以下コマンドです。

npm install react-router-dom

コード

プロジェクトを作成した際、元々のApp.tsxだと、初期ページのDOMを戻り値とする様なApp関数が生成されるかと思いますが、react-router-domを使用する場合は、BrowserRouterを使用した、パス制御を戻り値とします。

App.tsx

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Element1 from '..';
import Element2 from '..';

const App = () => {
  // 各ページのパス設定
  return <BrowserRouter>
    <Routes>
      <Route path={'/'} element={<Element1 />} />
      <Route path={'/sub'} element={<Element2 />} />
    </Routes>
  </BrowserRouter>;
};

export default App;

上記の実装の様にすれば、http://localhost:3000/で<Elements1 />ページを表示し、http://localhost:3000/subで、<Elements2 /> ページが表示される様になります。