React Router v7 ドキュメント 日本語版

English

useRoutes

Summary

Reference Documentation ↗

コンポーネントの代わりにオブジェクトを使用する <Routes> のフック版です。これらのオブジェクトは、コンポーネントの props と同じプロパティを持ちます。 useRoutes の戻り値は、ルートツリーのレンダリングに使用できる有効な React 要素、または一致するものが何もない場合は null です。

import { useRoutes } from "react-router";
 
function App() {
  let element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />,
        },
        { path: "tasks", element: <DashboardTasks /> },
      ],
    },
    { path: "team", element: <AboutPage /> },
  ]);
 
  return element;
}

Signature

function useRoutes(
  routes: RouteObject[],
  locationArg?: Partial<Location> | string,
): React.ReactElement | null

Params

routes

ルートの階層を定義する RouteObject の配列

locationArg

現在の Location の代わりに使用するオプションの Location オブジェクトまたはパス名文字列

Returns

一致したルートをレンダリングするための React 要素、またはルートが一致しない場合は null