Property 'render' does not exist on type 'IntrinsicAttributes & RouteProps'

はじめに

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

問題

Router

import { Login } from "../components/pages/Login";
import { homeRoutes } from "./HomeRoutes";

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

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

解決方法

エラー文を確認するとrenderがないと表示されていました。

Router

import { Login } from "../components/pages/Login";
import { homeRoutes } from "./HomeRoutes";

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

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を用いると解決します。
elementのこととして、JSX要素を直接指定して記載します。
関数を使わずにそのまま記載できます。

おわりに

Routeの中では今後elementが中心になります。

参考