Make React Router Navigation Feel Smoother Using CSS and Pace.js

React and React Router are a great combo when it comes to implementing navigation in websites built with React, but it can be improved. One thing that I always found to be lacking was a “buttery” feel when moving between pages. Everything always seemed to just happen without any kind of visual cues.

Today we will be improving navigation by doing two things:

1. Adding a visual cue to show when the site is loading. This will be achieved using Pace.js
2. Adding a Fade animation using CSS so that content doesn’t just suddenly appear.

Let’s get started shall we!? You can find an example of what we will be building here

What is Pace?

According to their website:

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

No need to hook into any of your code, progress is detected automatically.

Sounds good right!?

1. The setup

For this tutorial, I’m going to assume you have already set up a react app and some sort of navigation system using react-router.

Open your terminal to the folder directory and run the following command:

    npm install pace-js pace --save
  

Once this is done, open public/index.html and include the following script tag in the document head:

    <script src="[https://unpkg.com/pace-js@1.0.2/pace.min.js](https://unpkg.com/pace-js@1.0.2/pace.min.js)"></script>
  

Now, open src/index.js and include the following imports:

    import 'pace-js'
    import 'pace-js/themes/yellow/pace-theme-minimal.css'
  

The second line is the import of the theme we decided to use for pace-js. You can view all the theme demos here and then choose one of your own using this repo.

Next, we are going to define a global CSS class which we will use on all our Page Components. Open src/App.css and add CSS rules as follows

    @keyframes FadeAnim {
        0% {   
            opacity: 0;
        }
        100% {   
            opacity: 1;
        }
    }
  

Feel free to adjust these values in order to achieve different fade in effects.

2. The Implementation

Since Pace.js can automatically detect when a page load is occurring, all we have to do to complete the buttery smooth animation is add the “Fade” class to any page we want to navigate to like so:

    class Appextends
        Component {
            render() {
                return (
                    <div class="App Fade">
                        <!--Page Content-->
                    </div>
                    )
            }
        }
  

And that’s it! As you navigate between Page Components with the Fade class, the content will smoothly transition in and Pace.js will automatically start and stop the page load indicator as the content is loaded giving the user the sense that something is actually happening!

Thanks for reading!

I hope this post helped you in some way. Feel free to ask questions or suggest anything to me, I’m always willing to chat :)