Today in this post, we will learn about React Router by showing how to make a single web page app where we will route different links with a button in different components. Before we start, I hope you have some basic concept of React.js.

What is React Router?

It is the standard routing library for React. React Router keeps sync our UI with URL. It uses dynamic routing that takes place as your app is rendering, not in a configuration or convention outside of a running app.

Let’s Start

First we will make our default app by create-react-app

 

Now, app preview will open in new tab of your browser or you can open http://localhost:3000 in your browser.

Next, we will install react-router-dom this library is browser, if we were working making a React Native app then we will react-router-native

But for now we will install react-router-dom

The Router

React Router provides two components <BrowserRouter> and  <HashRouter>. The BroswerRouter should be use when you have server that will handle dynamic requests and should be use for static websites.
In this project we will use <BrowserRouter>. We will assume that our website is backed by dynamic server.
We will import <BrowserRouter> from react-router-dom in Index.js which is located in src folder.

Index.js

Making it beautiful

Now we will implement CSS in our App.css file and we will remove default content from our App.js
It will add css like this.

App.css

Now we will make new folder and make three components Home.js, About.js and Contact.js respectively.
Our app structure will look like this.

react router dom file structure codeparadox

Home.js

We will import NavLink from react-router-dom.
This is used to specify the links in React Router just like the anchor tag we were used to instead of href we will use to for defining the links.

NavLink is a special version of the Link that will add styling attributes to the rendered element when it matches the current URL.

In below code you can see we add H1 which we will show in which component we are. In NavLink we add to in which we will provide link just like href in anchor tag.

 

Now we will add similar chunk of code in our other two components.

About.js

Contact.js

 

Creating Routes

Now we will create three routes and also we will import Route component whose basic responsibility is to render some component when a URL matches the Route’s path.

We will define route in Route’s path prop and in component prop we will define what to render.We can also use render prop instead of component. Your component that you pass to Component prop of Route, constructor, componentWillMount, and componentDidMount will be executed every time the route is rendered.

But in render constructor, componentWillMount, and componentDidMount will not be executed every time the route is rendered.
So render saves you run time but it doesn’t have lifecycle methods.
We will use component prop.
Our App.js will look like this:-

 

Conclusion

In this small project we go through how we can use React Router to build our own Single Page Applications. We covered some major features.

For code go to this GitHub Repository.

You can go through the Documentation for Excellent information and concept with working Examples.
If you find this Post helpful, then share it with others.
Thank you !


Suraj Sharma

Developer who never forgets semicolon.

2 Comments

Tanseer Saji · September 22, 2018 at 12:50 am

Nicely explained

SALONI GARG · October 2, 2018 at 6:22 pm

Well explained 😉

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: