Hash-Based & Push-State URLs In React Apps - Part 2

URL scheme using HTML5 push-state


Push-State URLs

Push-State URLs are regular, normal, clean-looking URLs. They don’t contain a hash symbol. Push-State URLs use the HTML5 History API, and for the most part you should use it (with some exceptions which I will discuss). The word Push-State comes from a method in the History API called pushState().

The following is an example of a Push-State URL:

https://voicerecordpro.com/recordings/523fac70-6abc-11ey-a371-95dd97e42e90

Note that there’s no hash fragment. It’s just a normal looking URL (albeit a long one with lots of numbers in this example).

The Main Benefits Of Push-State URLs

Consistency

One of the major benefits of Push-State URLs is consistency between client-side and server-side routes. With this scheme, there’s only one set of URLs for both the client and server. With Hash-State URLs, you need to maintain two different URL schemes.

For example, the following link is using Push-State:

https://voicerecordpro.com/recordings/523fac70-6abc-11ey-a371-95dd97e42e90

It loads this view:

Voice Record Pro - individual recording route voicerecordpro.com

What if JavaScript wasn’t enabled for some of your users? Or what if you needed to serve HTML content for search engines that accessed these routes directly?

It really doesn’t matter, because it’s the same set of URLs for every situation. With Push-State, we’re just working with standard URLs.

Upgrading To A Single Page App Is Easy

If you have a public-facing site with widely distributed links, and you wanted to upgrade the site to a Single Page Application for an improved user experience, Push-State URLs would be the scheme to choose.

The change would be completely transparent to your users since the URLs wouldn’t change. The only thing your users would notice is better performance and faster navigation.

SEO

If SEO was important to your application, and it didn’t sit behind a login wall, Push-State URLs would be the scheme to choose. That’s because search engines ignore everything that comes after a hash fragment. So you should be using Push-State URLs if you want your application to have search engine relevancy for the majority of search engines.

When You Shouldn’t Use Push-State URLs

There is a situation where you should not use Push-State URLs.

You should not use Push-State when:

#1 You cannot implement URL redirection logic on the server to always serve the main index page regardless of the route requested.

AND

#2 You cannot specify server-side routes on your server (or you’re not interested in doing so).

There’s really no other reason not to use Push-State. Of course, if your app sits behind a login wall it really doesn’t matter either way. But even so, I would still argue that it’s better to use Push-State URLs since they look better.

URL Rewriting

If you’re not interested in implementing server-side routes, you can still use Push-State if you can implement URL rewriting. With URL rewriting, you can configure your server or hosting platform to serve the main index html file for all requests.

For example, let’s take Firebase. If you deploy your React App to Firebase, there’s no way to specify server-side logic for invidual routes on the server, so you can’t use it for server-side rendering.

But you can still implement a Push-State URL scheme on Firebase because it supports URL rewriting. Just add the followingrewrites object key to your firebase.json file.

{
  "hosting": {
    "public": "dist",
    "rewrites": [{
      "source": "**",
      "destination": "/index.html"
    }]
  }
}

Implementing Push-State URLs

If you’re using React Router, the Push-State URL scheme is very easy to implement. Just import <BrowserRouter> from React-Router and configure your routes.

import { BrowserRouter } from 'react-router-dom';
...
  <BrowserRouter>
    <Switch>
      <Route path="/recordings/:id" component={SomeView} />
    </Switch>
  </BrowserRouter>
...

That’s it!

The URL Is Key In Web Development

When writing a React App, you always want to map the current state of the application to the URL. This will help your application development immensely and it will enable you to link users to explicit sections of your application.

I show developers how to architect React Apps using React Router the right way, with explicit links to every relevant section of the app, in my course.

Having an application with a well developed URL structure that other applications can easily link to is a feature that comes for free when developing for the Web. Be sure to use it!





Learn How To Develop Professional React Apps

Professional React App brand image

React, Redux & Webpack are HOT HOT skills that are IN DEMAND.

Do you have what it takes to be a professional developer?

Learn from an industry expert and start building professional React apps for clients, employers, or your own startup.


UPGRADE YOUR SKILLS