React Router in React Js

Introduction

React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript library and it has a strong foundation and a large community behind it.

What is react router?

Many modern websites are made up of a single page, they just look like multiple pages because they contain components which render like separate pages. These are usually referred to as SPAs — single-page applications. At its core, what React Router does is conditionally render certain components to display depending on the route being used in the URL (/ for the home page, /about for the about page, etc.).Many Popular Websites Such as Instagram, Facebook, Youtube Using React Router. The Main Advantage Of React router is Page does not get refreshed when we route from one page to another Page.

React Router Used For:

React router is mainly Used For Developing Single Page web Applications.React Router is used to Define multiple routes in the application. when a user types a specific URL into the Browser and if this URL path matches any ‘route’ inside the router file, the user will be redirected to that particular route.

What Is Component In React:

Components are the building blocks of any react application and any typical React app will have many of these components. In simple Words, a component is a javascript class or function that optionally accepts inputs such that properties(props) and return a react element that describes how a section of UI(User Interface) should appear. one react app may have many functional or class components.

Functional Component Example:

Const Grreeting =()=><h1>Hello World!</h1>;

Getting Started

Create a demo Folder On the Desktop of Your Device

demo
cd demo

open vs code or command prompt in demo folder and type command

npx create-react-app myapp
cd myapp
npm start

To use React Router you have to install it by using NPM

npm install react-router-dom

You need to import BrowseRouter,Route, and Switch from a react-router-dom package in App Component

Import {BrowserRouter,route,Switch} from ‘react-router-dom’;

In my example, I link the landing page with two other pages which are components called About, Contact

In Your App Component Add BrowserRouter and Switch element (opening and closing tags)

Switch Tag is Used To switching between Routes and Switch Tag Must be Placed In BrowseRouter Tag.

It’s now time to add your <Route> tags. These are the links between the components and should be placed inside the <Switch> tags.

To tell the <Route> tags which component to load, simply add a path attribute and the name of the component you want to load with the component attribute.

<Route path=’/’ component={Home} />

Many homepage URLs are the site name followed by “/”, for example, www.instagram.com/. In this case, we add ‘exact’ to the Route tag. This is because the other URLs also contain “/”, so if we don’t tell the app that it needs to look for just /, it loads the first one to match the route, and we get a pretty tricky bug to deal with.

Now import the components into app.

import Home from ‘../src/Home’;
import About from ‘../src/About’;
Import Contact from ‘../src/Contact’;

Create a component Navbar to navigate between pages. Here we Used Function To Create Navbar Component

Let import and add <Link> tag in Navbar Component

Import {Link} from ‘react-router-dom’;

We Wrapped the Link tag in List Tag for a better UI Experience. We Have To Export Component as default By Writing Export Default Navbar

Add Some Stylings to Navbar Component

Import Navbar Component in App.js Component and Include in Our Code

So the final View of Our react Router

Source Code Of Whole Project:

https://github.com/gaurav2425/React-Router.git

Conclusion:

React Router is a very useful tool to incorporate into your React applications. Keeping your code organized with Routing can be useful to you as a Developer, But more importantly, routing provides a smooth and enhanced experience for your users.

Contributed by Gaurav Burande

LinkedIn Profile https://www.linkedin.com/in/gaurav-burande-9a12691b4/