ReactJS Router

In this tutorial you will learn about the ReactJS Router and its application with practical example.

ReactJS Routing

Routing is the process where user is directed to or rendered different pages based on user action/requests. In React, we can build Single Page Application (SPA) where web app loads a single page and dynamically updates that page as the user interacts with the web app.

ReactJS Router

ReactJS supports Single Page Application (SPA) using react router package. Router package helps directing users to different pages based on the url. When a user requests a specific url, the routing engine captures that url and renders the view based on the routes defined without reloading the entire application.

In this tutorial, we will building a single-page application to understand basic react routing concepts.

Step 1:- Lets create a new React project and switch to project directory using following command –

Step 2:- Let’s open the terminal again, change directory to your project folder and type the following command in order to run the server.

Step 3:- Now open the following URL in browser to view the output

http://localhost:3000

You will see the following screen.

Screenshot_1

React Router Installation

React Router comes into three different packages react-router, react-router-dom, and react-router-native with it. The react-router package enables the core routing components and functions for React Router applications, we never need to install it directly. The other two react-router-dom (browser specific) and react-router-native are environment specific. Since, we are building a web application, so we will install react-router-dom.

Step 4:- Install react-router-dom and save them as dependencies using following command –

Step 5:- Let’s open src/App.js, delete the existing code and put the following code in it and save it.

Here, in the above code following line of code –

Imports the following components in order to setup React Router –

BrowserRouter :- In React Router, for browser based projects there are two router components <BrowserRouter> and <HashRouter> are available. The <BrowserRouter> router is used for dynamic URL’s, while the <HashRouter> router is preferred for static websites.

Route :- The <Route> is one of the key component of React Router, it is used to define and render content based on the paths specified. It accepts component and render as props to define what should be rendered as the path defined.

Link :- The <Link>, component is used to create links, which allows user to navigate to different URL and to render its content without reloading the page.

Now open the following URL in browser again

http://localhost:3000

You will see the following screen.

Here, we have simply added three component links, which allows you to navigate different URL and to render its content without reloading the page.

In this tutorial we have learn about the ReactJS Router and its application with practical example. I hope you will like this tutorial.