ReactJS without server-side routing

If you develop in ReactJS, you may know that routing happens on the client-side. But, the complexity of servers these days require mixed routing – on both client and server sides.

The main problem comes when users refresh a sub-page like, type directly the URL, or navigate to a bookmarked page, your app needs server-side routing or the server will show everyone’s favourite 404 error (Resource not found).

So, you have two valid options:
1. to setup your server routing (Nah! Too complicated) or
2. to use HashRouter from react-router-dom.

The quickest way I know is to convert your app to use the HashRouter in React.

First, import the HashRoute in your index.js file:

import { HashRouter } from 'react-router-dom';

Then, surrond your App tag like this:

        <App />
), document.getElementById('root'));

From now on, your URLs will look like this:

And all bookmarks and refreshed pages will be fed through the HashRouter.

You can change the base route as well by using

<HashRouter basename="/career"/>

You can also look at the documentation here.