如何在NextJS中移除react-admin添加的URL哈希

要在Next.js环境下移除React Admin自动添加的URL哈希，需要结合Next.js的路由机制和React Admin的自定义Router适配，以下是具体步骤：

1. 封装适配Next.js的自定义Router组件 #

创建一个适配Next.js路由的React Admin Router提供器，替代默认的HashRouter或BrowserRouter：

// components/NextAdminRouter.js
import { useRouter } from 'next/router';
import { RouterProvider } from 'react-admin';

const NextAdminRouter = ({ children }) => {
  const router = useRouter();

  // 实现React Admin所需的Router接口
  const raRouter = {
    push: (path) => router.push(path),
    replace: (path) => router.replace(path),
    goBack: () => router.back(),
    location: {
      pathname: router.pathname,
      search: router.asPath.split('?')[1] || '',
      hash: '', // 强制清除哈希标记
    },
    listen: (callback) => {
      return router.events.on('routeChangeComplete', () => {
        callback({
          pathname: router.pathname,
          search: router.asPath.split('?')[1] || '',
          hash: '',
        });
      });
    },
  };

  return <RouterProvider value={raRouter}>{children}</RouterProvider>;
};

export default NextAdminRouter;

2. 配置Next.js的Catch-All路由解决404问题 #

由于React Admin是单页应用，直接刷新非根路由会触发Next.js的404，需要创建一个Catch-All路由页面来接管所有Admin相关路径：

// pages/admin/[...path].js
import Admin from 'react-admin';
import { dataProvider } from './your-data-provider'; // 替换为你的数据提供者
import NextAdminRouter from '../../components/NextAdminRouter';

const AdminDashboard = () => {
  return (
    <NextAdminRouter>
      <Admin 
        dataProvider={dataProvider} 
        basename="/admin" // 匹配Next.js的路由前缀
      >
        {/* 在这里配置你的React Admin资源（Resources） */}
      </Admin>
    </NextAdminRouter>
  );
};

export default AdminDashboard;

// 配置静态生成的回退逻辑，让Next.js交由客户端路由处理
export async function getStaticProps() {
  return { props: {}, fallback: true };
}

export async function getStaticPaths() {
  return { paths: [], fallback: true };
}

3. 验证效果 #

启动Next.js应用后，访问/admin路径，你会发现URL中不再包含哈希标记；刷新任意Admin子路由（如/admin/users），页面也不会返回404，因为Catch-All路由会渲染Admin组件，由React Admin接管客户端路由逻辑。

内容的提问来源于stack exchange，提问作者user11872092