React.js HashRouter 404 page

Viewed 389

I have a problem with implementing fully functional 404 page with React HashRouter.

routes.tsx

export const Routes = () => (
  <HashRouter>
    <Switch>
      <Route path="/" exact={true} component={Home} />
      <Route path="/route1" component={Route1} />
      <Route path="/route2" component={Route2} />
      <Route component={ErrorPage} />
    </Switch>
  </HashRouter>
);

app.tsx

<>
  ...
  <Routes />
  ...
</>

Current behaviour:

  1. When typing in address bar {url}/#/{non-existing-route}, then behaviour is correct - browser displays ErrorPage
  2. When typing in address bar {url}/{non-existing-route}, then behaviour is incorrect - browser changes url to {url}/{non-existing-route}#/ and displays Home page.

I would like ErrorPage to be displayed in both situations.

This problem does not occur when I am using BrowserRouter, but I must use HashRouter here.

Thanks for your help in advance!

0 Answers
Related