Understanding React Routing With A Sample Project

In this blog, I'm going to develop a small POC in React using React-Dom-Router. Routing is very important as an application grows.

In this blog, I'm going to develop a small POC in React using React-Dom-Router. Routing becomes very important as an application grows, especially for handling the navigation from one component to another. I will be covering the basics using Stateful and Stateless components.

Follow the below npm commands.

  1. npm install -g create-react-app  // To install react library for React development
  2. npx create-react-app my-app_Demo   //create new react application
  3. npm install --save react-router-dom   // router comes in different package

Let's import the route-related class.

  1. import { BrowserRouter as Router, NavLink, Route, Switch  } from 'react-router-dom';  
BrowserRouter
 
It's like a parent React component which keeps an eye on the URL changes.
  1. <Router>  
  2.  <NavLink>Your Code goes here</NavLink>  
  3.  <Route path="/blog" exact strict component={Blog} />  
  4. lt;/Router>  

Route

Based on the URL passed by the parent, it will render other component as per as its matching component. 
  1. <Route path="/blog" exact strict component={Blog} />  
NavLink
 
It's just a new version of <Link>. To use an active route class, we commonly use NavLink.
  1. <NavLink  to="/about"  className="nav-link"  exact  activeStyle={{ color: "black" }} >    

It's a simple navigation button; on click of this link, it will redirect to the "/about" component.

exact
 
This means the URL should be "localhost:3000/about". If you don't put the exact one, it can throw an error. If http://localhost:3000/ is used, it will match "/" and render the Home component as well.
 
Note
Use exact only when there are no nested routes for the specified path. Here's the complete code.
  1. import React, { Component } from "react";  
  2. import "./App.css";  
  3. import { BrowserRouter as Router, NavLink, Route , Switch } from "react-router-dom";  
  4. import Contact from "./Contact";  
  5. import Blog from "./blogs";  
  6. import App2 from './RouterPara';  
  7. import UrlPara from './UrlPara';  
  8.   
  9. class App extends Component {  
  10.    render() {  
  11.     return (  
  12.       <Router>  
  13.     <div className="App">  
  14.         <nav className="navbar navbar-expand-lg navbar-light bg-light navbar-static-top">  
  15.             {/* <a className="navbar-brand" href="https://rajendrataradale.wordpress.com/author/rajendrataradale/"> 
  16.               RT's Knowledge World 
  17.             </a> */}  
  18.             <NavLink to="/" className="navbar-brand" exact activeStyle={{ color: "black" }}>  
  19.                 RT's Knowledge World  
  20.             </NavLink>  
  21.             <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  
  22.                 <span className="navbar-toggler-icon" />  
  23.             </button>  
  24.             <div className="collapse navbar-collapse" id="navbarNav">  
  25.                 <ul className="navbar-nav">  
  26.                     <li className="nav-item active">  
  27.                         <NavLink to="/" className="nav-link" exact activeStyle={{ color: "black" }}>  
  28.                             Home  
  29.                         </NavLink>  
  30.                     </li>  
  31.                     <li className="nav-item">  
  32.                         <NavLink to="/about" className="nav-link" exact activeStyle={{ color: "black" }}>  
  33.                             About  
  34.                         </NavLink>  
  35.                     </li>  
  36.                     <li className="nav-item">  
  37.                         <NavLink to="/blog" className="nav-link" exact activeStyle={{ color: "black" }}>  
  38.                             Blogs  
  39.                         </NavLink>  
  40.                     </li>  
  41.                     <li className="nav-item">  
  42.                         <NavLink to="/contact" className="nav-link" exact activeStyle={{ color: "black" }}>  
  43.                             Site Admin  
  44.                         </NavLink>  
  45.                     </li>  
  46.                     <li className="nav-item">  
  47.                         <NavLink to="/data" className="nav-link" exact activeStyle={{ color: "black" }}>  
  48.                             Test Data  
  49.                         </NavLink>  
  50.                     </li>  
  51.                     <li className="nav-item">  
  52.                         <NavLink to="/urlpara/255066" className="nav-link" exact activeStyle=                                                     {{ color: "black" }}>  
  53.                             Test URL Parameters  
  54.                         </NavLink>  
  55.                     </li>  
  56.                 </ul>  
  57.             </div>  
  58.         </nav>  
  59.         <hr className="my-4" />  
  60.         <div>  
  61.             <Switch>  
  62.                 <Route path="/" exact strict render={()=> { return (  
  63.                     <div className="jumbotron container row">  
  64.                         <h1 className="display-4">Welcome Home!</h1>  
  65.                         <p className="lead">  
  66.                             Unless you try to do something beyond what you have already mastered, you will never grow  
  67.                         </p>  
  68.                         <hr className="my-4" />  
  69.                         <p>  
  70.                             Sometimes it’s necessary to go a long distance out of the way in order to come back a short distance correctly.  
  71.                         </p>  
  72.                         <br />  
  73.                         <a className="btn btn-primary btn-lg" href="https://rajendrataradale.wordpress.com/author/rajendrataradale/" role="button">  
  74.                       Learn more  
  75.                     </a>  
  76.                     </div>  
  77.                     ); }} />  
  78.   
  79.                     <Route path="/about" exact strict render={()=> { return (  
  80.                         <div className="card">  
  81.                             <div className="card-header">Rajendra Taradale</div>  
  82.                             <div className="card-body">  
  83.                                 <blockquote className="blockquote mb-0">  
  84.                                     <p>  
  85.                                         Over 8 Years of experience in IT Industry. Hands-on experience in all phases of Software Development Life Cycle (SDLC) in Web and Windows Applications under Agile Framework (Scrum, Kanban, and SAFe-Scaled)  
  86.                                     </p>  
  87.                                     <footer className="blockquote-footer">  
  88.                                         Welcome  
  89.                                         <cite title="Source Title">  
  90.                               RT's Knowledge World  
  91.                           </cite>  
  92.                                     </footer>  
  93.                                 </blockquote>  
  94.                             </div>  
  95.                         </div>  
  96.                         ); }} />  
  97.                         <Route path="/blog" exact strict component={Blog} />  
  98.                         <Route path="/contact" exact strict component={Contact} />  
  99.                         <Route path="/data" exact strict component={App2} />  
  100.                         <Route path="/urlpara/:id" exact strict component={UrlPara} />  
  101.             </Switch>  
  102.         </div>  
  103.     </div>  
  104. </Router>  
  105.     );  
  106.   }  
  107. }  
  108.   
  109. export default App;  

match: will help you to read the URL parameters. 

  1. <Router>  
  2.  <NavLink to="/urlpara/255066" className="nav-link" exact>Test URL Parameters</NavLink>  
  3.  <Route path="/urlpara/:id" exact strict component={UrlPara} />  
  4.  </Router>  

The component code goes as below for reading the URL parameters.

  1. import React, { Component } from 'react';  
  2.   
  3. class UrlPara extends Component {  
  4.        render() {  
  5.         return (  
  6.             <div>  
  7.                 User Navigated to : {this.props.match.params.id}  
  8.                 <p>  
  9.                     match contains : ${JSON.stringify(this.props.match,null,4)}  
  10.                 </p>  
  11.             </div>   
  12.         );  
  13.     }  
  14. }  
  15.   
  16. export default UrlPara;  

Let's see the output in the browser.

Understanding React Routing with Sample Project 
 
Switch()
 
Also, we need to make sure that only one component renders at a time. 
  1. <Switch>  
  2.           <Route path="/blog" exact strict component={Blog} />  
  3.           <Route path="/contact" exact strict component={Contact} />  
  4.  </Switch>  
Understanding React Routing with Sample Project
Above is the complete demo POC with a highlighted section of React routing concepts.