React routing using React-router (NPM)

What is React-router?

Prerequisite:

Getting Started:

npx create-react-app frontend
import React from "react"function App() {return (<div className=""></div>);}export default App;
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React Routing</title><!-- Bootstrap CSS CDN  --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><!-- Bootstrap JS CDN  --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script></body></html>
npm install react-router-dom
npm start
import React from "react";function Navigation(){return(<div className="navigation"><nav className="navbar navbar-expand-lg navbar-light bg-light"><div className="container-fluid"><a className="navbar-brand" href="#">Navbar</a><button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span className="navbar-toggler-icon"></span></button><div className="collapse navbar-collapse" id="navbarNav"><ul className="navbar-nav"><li className="nav-item"><a className="nav-link active" aria-current="page" href="/">Home</a></li><li className="nav-item"><a className="nav-link" href="/dashboard">Dashboard</a></li></ul></div></div></nav></div>);}export default Navigation;
import React from "react"import Navigation from "./components/Navigation";function App() {return (<div className=""><Navigation /></div>);}exportdefault App;
import React from "react";function Dashboard(){return(<div className="dashboard"><h1>This is Dashboard with /dashboard router</h1></div>);}export default Dashboard;
import React from "react";function Home(){return(<div className="home"><h1>This is Home router rendered on "/"</h1></div>);}export default Home;
import React from "react"import Home from "./components/Home";import Navigation from "./components/Navigation";import Dashboard from "./components/Dashboard";function App() {return (<div className=""><Navigation /><Home /><Dashboard /></div>);}export default App;
import React from "react"import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";import Home from "./components/Home";import Navigation from "./components/Navigation";import Dashboard from "./components/Dashboard";function App() {return (<div className=""><Navigation /><Router><Routes><Route  path="/" element={ <Home />} /><Route  path="/dashboard" element={ <Dashboard />} /></Routes></Router></div>);}export default App;
Home rout “/”
Dashboard route “/”
import React from "react"import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";import Home from "./components/Home";import Navigation from "./components/Navigation";import Dashboard from "./components/Dashboard";import Message from "./components/Message";function App() {return (<div className=""><Navigation /><Router><Routes><Route  path="/" element={ <Home />} /><Route  path="/dashboard" element={ <Dashboard />} /><Route  path="custom/:route_id" element={ <Message />} /></Routes></Router></div>);}export default App;
import React from "react";function Message(){return(<div className="message"></div>);}export default Message;
/custom/Musab
import React from "react";import { useParams } from "react-router-dom";function Message(props){let { route } = useParams();console.log(route)return(<div className="message"><h1>User Entered this route {route}</h1></div>);}export default Message;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store