🕌

High Performance React Web 開発: App.tsxの解説

2022/12/04に公開

React

tsx

tech

概要

下記リポジトリを参考に、typeScriptの勉強を進めているので、不明点の洗い出しと理解した内容を書き出す。解説するコードについては、末尾に記載している。

Routerについて

Webページとは、「クライアントがリクエストするURL」と「それに対してサーバーが答えるレスポンス」によって成り立っている。つまり、どのURLがどのリクエストに紐づいているか、設定するのがRouterの役目である。

Route

下記のように設定する。

path="URL" リクエストするURLを設定する
element="component" 表示するページコンポーネントを指定する

<Route path="/" element={<ReactQueryA />} />
<Route path="/query-b" element={<ReactQueryB />} />
<Route path="/fetch-a" element={<ClassicalFetchA />} />

Routes

Routesタグ内でルーティングを記載することで、urlにマッチした最初のルーティングだけがレンダリングされる。もしRoutesタグがなかったな場合、一致する全てがレンダリングされる。

BrowserRouter

BrowserRouterタグでROuteコンポーネント全体を包み込み、ルーティングを定義する。

Layout

質問：こちらをタグとして入れる理由

参考文献

コード

import { FC } from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { Layout } from './components/Layout'
import ClassicalFetchA from './components/ClassicalFetchA'
import ClassicalFetchB from './components/ClassicalFetchB'
import { ReactQueryA } from './components/ReactQueryA'
import { ReactQueryB } from './components/ReactQueryB'
import { MainContext } from './components/MainContext'
import { MainRTKit } from './components/MainRTKit'

const App: FC = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<ReactQueryA />} />
          <Route path="/query-b" element={<ReactQueryB />} />
          <Route path="/fetch-a" element={<ClassicalFetchA />} />
          <Route path="/fetch-b" element={<ClassicalFetchB />} />
          <Route path="/main-context" element={<MainContext />} />
          <Route path="/main-rtkit" element={<MainRTKit />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  )
}

export default App;