React Router v6でのネストの書き方で詰まったところ

はじめに

React Router v6の書き方で特に詰まったところを上げたいと思います

コンポーネントの配下にコンポーネントをレンダリングする場合

v5での書き方

v5の場合はswitchの中でRouteを設定し、親コンポーネントの配下に子コンポーネントをレンダリングし、それをSwitch文で囲っていました。

import { BrowserRouter, Switch, Route } from "react-router-dom";

<BrowserRouter>
  <Switch>
    <Route exact path="/">
      <ParentComponent>
        <ChildComponent />
      </ParentComponent>
    </Route>
  </Switch>
</BrowserRouter>

v6からの書き方

v6からはRoutesで囲み、elemntの中で親コンポーネントの配下の子コンポーネントをレンダリングするようになりました。

import { BrowserRouter, Routes, Route } from "react-router-dom";

<BrowserRouter>
  <Routes>
    <Route
      path="/"
      element={
        <ParentComponent>
          <ChildComponent />
        </ParentComponent>
      }
    />
  </Routes>
</BrowserRouter>

終わりに

elemntの中でネストできることを知らず、詰まってしまいました。
React Router v6の書き方を覚えていきたいです。