React Router v6のルーティングでrenderの代わりにelementを使う

はじめに

現在Udemyの下記の講座を学習中です。

本講座では、Reactのバージョンが古い（React v17＆React Router v5）のですが、私は最新のバージョン（React v18＆React Router v6）を使っているため、
バージョンの不一致で時々エラーがでます。
今回はルーティングの処理でエラーが出たので解決方法をまとめます。

なお、使用言語はRact×TypeScriptです。

問題

renderを使ったルーティング処理で「renderが使えない」とエラーが出てしまいました。

Router.tsx

import { FC, memo } from "react";
import { Route, Routes } from "react-router-dom";
import { Login } from "../components/pages/Login";
import { homeRoutes } from "./HomeRoutes";

export const Router: FC = memo(() => {
   
    return (
        <Routes>
            <Route path="/">
                <Login />
            </Route>
        
            <Route path="/home" render={({ match: { url } }) => (
                <Routes>
                    {homeRoutes.map((route) => (
                        <Route key={route.path} path={`${url}${route.path}`}>
                            {route.children}
                        </Route>
                    ))}
                </Routes>
            )} />
        </Routes>
    )

})

解決方法

React 18 では render がサポートされていないため、代わりに element を使用しました。

Router.tsx

import { FC, memo } from "react";
import { Route, Routes } from "react-router-dom";
import { Login } from "../components/pages/Login";
import { homeRoutes } from "./HomeRoutes";

export const Router: FC = memo(() => {


    return (
        <Routes>
            <Route path="/" element={<Login />} />

            <Route path="/home" element={
                <Routes>
                    {homeRoutes.map((route) => (
                        <Route key={route.path} path={route.path} element={route.children} />
                    ))}
                </Routes>
            } />
        </Routes>
    )

})

おわりに

renderとelementの違いとは？

render
ルーティングされたときに表示させたいものを、関数として指定します。
また、その関数は、Reactコンポーネントを返す必要があります。

<Route path="/about" render={() => <AboutPage />} />

element
JSX要素を直接指定します。
つまり、関数を使わずにコンポーネントやJSXをそのまま書くことができます

<Route path="/about" element={<AboutPage />} />

elementを使用したほうが、見た目が少しすっきりしますね。

参考

React Routerの公式ドキュメントにelementの使い方が載っています。