'Get "This page could not be found." on refresh page - using Next Js and React-admin

Context I currently have created a project using React-admin and NextJS.

Problem Whenever I refresh the page I'm redirected to the 404 page - It has started after I had removed the hash from the URL (localhost:3000/#/). It only works well when I'm at the localhost:3000 page.

Code:

// into src/admin/ReactAdmin.tsx file
import { Admin, Resource } from 'react-admin'
import { createBrowserHistory as createHistory } from 'history'

const history = createHistory()

import {
  RestrictionList,
  RestrictionEdit,
  RestrictionCreate,
} from './components/restricao/'
import baseDataProvider from './DataProvider'

const App = () => (
  <Admin dataProvider={baseDataProvider} history={history}>
    <Resource
      name='source'
      list={RestrictionList}
      edit={RestrictionEdit}
      create={RestrictionCreate}
    />
  </Admin>
)

export default App

//into next.config.js file
module.exports = {
  trailingSlash: true,
}

// into src/pages/index.tsx file
import dynamic from 'next/dynamic'

const ReactAdmin = dynamic(() => import('../admin/ReactAdmin'), {
  ssr: false,
})

const HomePage = () => <ReactAdmin />

export default HomePage


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source