ReactJS Routing, from the very basics.

The only route you need for starting off with ReactJS and it’s Routing.

react-router

In my experience, it is surely very easy to use these packages for their required purpose. However, it is equally important to know the theory behind it’s working. If you don’t know anything, there is nothing to worry about. I’ll cover the basics.

Let’s start with The Problem Statements :

1. Why do we need an external package(s) for this?
2. What are react-router and react-router-dom?
3. How are react-router and react-router-dom different?
4. How to begin working with it?
5. How to activate the routing technology in the app?
6. How to register different routes and render various (or single) component(s) in those routes?
7. How to add a 404 case?

Let’s tackle these questions Top-Down:

1. Why do we need an external package(s) for this?

ReactJS was created for SPAs (Single Page Applications). It has many external dependencies and packages that are created by the React Community themselves for extended (and added) functionalities. Routing is one of them.

Now you may ask why we don’t use an a tag with an href attribute to a different file or link. This is because the use of an a tag will reload the page. This does not cope well with the way React’s rendering of it’s Virtual DOM works. The virtual DOM looks for changes in the current state and then renders only the required components (based on the changed state). And therefore, there is no reloading of the page.

Thus, we have react-router-dom. Its imports used for routing essentially look for changes in the state and render a whole new component on a completely different URL with efficiency without reloading.

2. What are ‘react-router’ and ‘react-router-dom’?

These packages handle the dynamic rendering of the routes in your react web app. Unlike the classical way in which routing is handled externally (outside the app), these packages handle the routing internally in the application. They re-render the pages and components according to the difference between the Virtual DOM and the Actual DOM.

How react-router-dom handles the routes internally.

3. How are ‘react-router’ and ‘react-router-dom’ different?

At the core level, these two are almost the same. They both work dynamically.

react-router-dom is better than its subset, react-router.

The difference between the two is that react-router-dom is everything that react-router is, and more. It is a superset of react-router. Thereact-router-dom is a wrapper around react-router and pulls all the features of react-router for you in it.

In conclusion, there is no need to use react-router directly. All you have to do is use react-router-dom . react-router-dom is made especially for WebApp react routing and includes all the exports of react-router.

4. How to begin working with it?

Lets start by creating a basic react app with installing react-router-dom in it as well.

npx create-react-app learnrouting
cd learnrouting
npm install --save react-router-dom

This will create a react app. We installed react-router-dom as a production dependency.

5. How to activate the routing technology in the app?

Now we will enable the react-router-dom in our app.

Importing BrowserRouter from react-router-dom and wrapping our App component with it.

The BrowserRouter enables it all throughout our app and its components. We only need to use it once.

6. How to register different routes and render various (or single) component(s) in those routes?

We’ll start off by applying the Route for some dummy content.

Importing Route from react-router-dom.

The Route registers a route to the path specified. Everything in between Route is rendered on that path.

The use of theexact keyword in this example has a significance.

‘/’ matches all the routes beginning with it. Renders Hello on all.

Without the attribute exact in the Route tag, all possible extensions of that path match the defined path in the tag. Therefore, all the routes starting with '/’will render the component ( Helloin the image).

‘/’ (exact) matches only the exact pathname. Renders Hello only there.

On the other hand, if you define the exact attribute, It looks for the complete and exact path and renders the component on only the matching one.

I recommend you to try this on your own as well, since it might be a little complicated to wrap your head around this.

Now let us define another Route .

Create this component and import it into your App.js. Change the App.js like shown below..

The new Route has a component attribute in which we passed our RouteOne import. This renders the component (RouteOne)at the specified path . The use of exact means that if we go to the path='/route-one/some-uri' , we will not see our RouteOne there.

Now in a bigger application, where multiple routes are defined, we can add a Switchcase imported from react-router-dom .

App.js with Switch imported and applied.

What Switch does is that it looks for the routes defined it in, Top-Down, and chooses the first one matching the path criteria. It then breaks out of the loop and does not look for other routes defined. It helps in streamlining the selection for react-router-dom .

DISCLAIMER: Always keep your more specific paths before the less specific ones.

7. How to add a 404 case?

This is very simple.

All we did was pass an /'*’ as the path and rendered the desired component there.

Read the disclaimer once again. Notice how the 404 case is placed last. If it was placed as the first Switch case, all the routes would have matched it and escaped out. That is why Always keep your more specific paths before the less specific ones.

These were the basics of routing in ReactJS using react-router-dom. There are still many things such as Link, NavLink, Redirect , Nested Routing and more concepts left to explore for you. The scope of this article would have been too long if included here. I will try to cover these in the upcoming articles.