React-Admin：useNavigate() 、useLocation()などルーティングに関するエラーの対処方法

利用パッケージ

利用パッケージ

• React：18.0
• react-router：7.5.3
• react-router-dom：7.5.3
• Next.js：15.3.1
• react-admin：5.8
• ra-data-json-server：5.8

実行コード

以下のようなチュートリアルにあるコードをpages配下に配置し、Nextを実行。

/pages/app.ts

import * as React from "react";
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const AdminApp = () => (
    <Admin dataProvider={dataProvider}>
      <Resource name="posts" list={ListGuesser} />
      <Resource name="comments" list={ListGuesser} />
    </Admin>
);

export default AdminApp;

/pages/index.ts

import dynamic from "next/dynamic";

const App = dynamic(() => import("./app"), { ssr: false });
export default App;

エラー内容

以下のエラーログが表示される。トレースは省略する。

error.log

useNavigate() may be used only in the context of a <Router> component

error.log

useLocation() may be used only in the context of a <Router> component

上記のエラーは、リファレンスにも掲載されている。ただし、リファレンスの解消方法にある「reac-dom-router」、「react-router」の両方のバージョンを揃えてもエラーが発生する。

対処方法

以下のサイトを参考に、app.tsの内容を修正する。

修正コードは以下。AdminタグをBrowserRouterタグで囲う。これでチュートリアルにある画面が表示される。

app.ts

import * as React from "react";
import { BrowserRouter } from "react-router-dom";
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const AdminApp = () => (
  <BrowserRouter>
    <Admin dataProvider={dataProvider}>
      <Resource name="posts" list={ListGuesser} />
      <Resource name="comments" list={ListGuesser} />
    </Admin>
  </BrowserRouter>
);

export default AdminApp;