Routing In ReactJS

In this article, we will learn how to use routing in ReactJS.

React Router will help you to create and navigate between the different URLs. They allow your user to move between the components of your application while preserving the user state and can provide unique URLs for these components to make them more sharable.

We have created 3 components like below.

• Home Component

import React from 'react'

export default function home() {
    return (
        <div> 
            Home page
        </div>
    )
}

• About component

import React from 'react'

export default function about() {
    return (
        <div>
            About page
        </div>
    )
}

• Contact component

import React from 'react'

export default function contact() {
    return (
        <div>
            Contact page
        </div>
    )
}

Then, we have installed the react-router-dom npm module to allow implement dynamic routing like a blow.

npm i react-router-dom

React-router-dom give some routing component. and it can be use to app component like below.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import Home from './components/home';
import About from './components/about';
import Contact from './components/contact';
import './App.css';

function App() {
  return (
    <Router>
      <div >
        <ul style={{ justifyContent: 'left', paddingLeft: 0 }}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About Us</Link>
          </li>
          <li>
            <Link to="/contact">Contact Us</Link>
          </li>
        </ul>
        <div style={{paddingLeft:'20px'}}>
          <Switch>
            <Route exact path='/' component={Home}></Route>
            <Route exact path='/about' component={About}></Route>
            <Route exact path='/contact' component={Contact}></Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}
export default App;

Here, add 3 pages of component home, about and contact and also react-router components.

Route: Route is the conditionally shown component that renders some UI when its path matches the current URL.

Link: The link component is used to create links to different routes and implement navigation around the application. It works as an HTML anchor tag.

Switch: Switch component is used to render only the first route that matches the location rather than rendering all matching routes. Although there is no defying functionality of the SWITCH tag in our application because none of the LINK paths are ever going to coincide. But let’s say we have a route (Note that there is no EXACT in here), then all the Route tags are going to be processed which starts with ‘/’ (all Routes start with /). This is where we need the SWITCH statement to process only one of the statements.

Exact: It is used to match the exact value with the URL. For Eg., exact path=’/about’ will only render the component if it exactly matches the path but if we remove it exactly from the syntax, then UI will still be rendered even if the structure is like /about/10.

Its give output like below.