The Easiest Tutorial on React Router v4 You’ll Ever Find  -  Build a Single-Page-Application in seconds

Woman standing alone looking down at her phone

I strongly belive that ReactJS is well-suited for Single-Page-Applications (SPA).

I was looking around for almost a whole day before clearly understanding how React Router would help me building my first SPA and, here I am.

This article will provide you a short one-file running snippet to launch a Single-Page-Application in seconds.

The Code

Demonstration :

Actually, there are only ~5 lines to understand

Structure of an SPA :

The Menu is just a list of links.

The Dynamic Content is what changes according to how the user navigates.

For instance, if I click on a link “Home” it would take me back to the Home panel. Then if I click on a link “Marketing” it would take me to the Marketing panel.

Notice that I don’t use the word “page”!

Thanks to React Router, the actual page never changes, but the dynamic content does. (refer to my Codepen demonstration).

How it works :

  • First : You need to install react-router-dom . It is the package used to implement the routing process in your web application.

yarn add react-router-dom

  • Second : You will import the meaningful parts from this package.

import{BrowserRouter}from 'react-router-dom' in index.js

import{NavLink}from 'react-router-dom' in your navigation component

import{Route}from 'react-router-dom' in your display component

  • Third : Wrap your App component (inside index.js) inside a BrowserRouter

<BrowerRouter>
   <App />
</BrowerRouter>

This is how the magic happens. React Router uses this component to make your application aware of the navigation (history, current path, etc).

  • Fourth : Fill your navigation component using NavLink items.

<NavLink exact to="/url">Menu item</NavLink>

NavLink is different from Link because it handles the active class-naming. It lets you customize appearance of active links based on the current URL, automatically.

The exact property will tell React Router to add active to the link only if the path is identical as the one given in the to property.

The to property is where the user will be redirected when clicking this link.

  • Finally : Fill your display component with Route items.

<Route exact path="/url" component={Component}/>

Route is just a conditional rendering component.

It will render the Component given in the component property, only if the current path is identical ( exact ) to the path property.

Putting exact on each Route lets you render only one component at a time. (essentially because you’d put a different exact path for each Route )

That’s it

It is that easy hopefully !

As you can see, it is a simple three-step process :

  • Wrap the main component inside a BrowserRouter
  • Fill the navigation with NavLink items
  • Fill the display with Route items

Yet, there is more to know about this awesome package. See by yourself.

Thanks for reading

I hope this was useful to you !

Check out my latest story :

Handcrafted Email Signatures for the 21st Century

Feel free to reach out at david.mellul@outlook.fr ☕️ 😃

“Cappuccino in a white mug with white foam art on a wooden table” by wu yi on Unsplash
David

Fullstack Developer, Trainer & Entrepreneur.

Learning stuff, sharing knowledge and building on top of great ideas are my top priorities.

Leave a Reply

Your email address will not be published.

Share
Share