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 https://www.splendoid.com/mypage, 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:

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

From now on, your URLs will look like this:
https://www.splendoid.com/#/mypage

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.