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
Musab Abbasi

Musab Abbasi

88 Followers

Computer Science Graduate with MERN stack website development expertise.