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';
  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. ); }} />
  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. }
  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';
  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. }
  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.
Complete code reference to get started