Http 404 Error Page

Custom 404 Error Page in React App with HashRouting and Spring Boot

Are you challenged with showing a custom 404 error page built in React when your app routing is handled using HashRouter instead of BrowserRouter and you are using Spring Boot to deploy your app as static SPA?

Then, you are at the right blog looking for the right solution.

First Thought: Why not just use BrowserRouter then?

Not always the available options right? Especially when we prefer:

• Backward compatibility (supporting older browsers)
• Separate server-side & client-side routing

First Instinct: Shouldn’t it be simple? Both React & Spring has routing options?

Let’s understand more in detail the problem statement with some code:

• Simple React setup for 404:

import React from "react";
import styles from "./App.module.css";
import { Route, HashRouter, Switch } from "react-router-dom";

const App = () => {
  return (
    <div className={styles.App}>
      <HashRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/home" component={Home} />
          <Route exact path="/404" component={NotFound} />
          <Route component={NotFound} />
        </Switch>
      </HashRouter>…