How to remove Hash from url in react-admin on NextJS

Question

React Admin has documentation on how to remove the hash from being added to your apps url here by wrapping the Admin component in BrowserRouter but doing this does not work as expected in NextJS as the app will return a 404.

There is currently no documentation on how to do this on NextJS. Anyone know how can I remove the hash from the url added by react-admin when using NextJS

Answer 1

Setting a rewrite as suggested in this answer worked for me https://stackoverflow.com/a/64600814/11872092

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: '/',
      },
    ];
  },
};

Answer 2

If you want to render it under a specific path (e.g /admin), create the following directory structure:

admin/[[...admin]]/page.tsx

Then wrap your Admin component with a BrowserRouter:

<BrowserRouter basename="/admin">
  // Your Admin
</BrowserRouter