Home >> Tutorials >> React Router
Previous Page

State vs Props

React Router

React router is a routing library built on top of the react which is used to create the routing in react apps.

Suppose, When a user types any URL in the browser, and if that URL matches to any existing 'route' inside the your router file, then user will be redirected to that particular route.

How to Install React Router:
  1. react-router:It provides the core routing components and functions for the React Router applications.
  2. react-router-dom: It is used for web applications design.
  3. react-router-native: It is used for mobile applications.

To install the react router you need to download the react-router-dom package by running the following commands

npm install --save react-router-dom
Type of Components in React Router:

There are two types of router components:

  1. <BrowserRouter> It is used for handling the dynamic requests.
  2. <HashRouter> It is used for handling the static request.

Remarks: The above two components i.e. <BrowserRouter> and <HashRouter> are for browser based projects.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import App from './App';
import About from './About';
import Contact from './Contact';
import Article from './Article';
import NotFound from './NotFound';

const RouterConfig = (

  • Home
  • About us
  • Contact us
) ReactDOM.render(RouterConfig, document.getElementById('root'))
Remarks:
  1. Url Parameters: Url parameters helps us to render the same component based on its dynamic url value like id etc.
What is the difference between Link and NavLink?

The link is used to navigate the different routes on the site. But NavLink is used to add the style attributes to the active routes.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import App from './App';
import About from './About';
import Contact from './Contact';
import Article from './Article';
import NotFound from './NotFound';

const RouterConfig = (

  • Home
  • About us
  • Contact us
) ReactDOM.render(RouterConfig, document.getElementById('root'))
Previous Page

State vs Props

Full Stack Tutorials

Author @FullStackTutorials | View all Articles