React Router

React Router is a library for handling navigation and routing in React applications. It enables you to build single-page applications with dynamic, client-side routing. React Router provides a set of components that manage the navigation and rendering of components based on the URL.

Here’s a basic overview of how React Router works and some of its key components:

  1. Installation:
    You can install React Router using npm or yarn:
   npm install react-router-dom

or

   yarn add react-router-dom
  1. BrowserRouter:
    BrowserRouter is the most common router component. It uses the HTML5 history API to keep the UI in sync with the URL.
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

   const App = () => {
     return (
       <Router>
         <Switch>
           <Route path="/home" component={Home} />
           <Route path="/about" component={About} />
           <Route path="/contact" component={Contact} />
         </Switch>
       </Router>
     );
   };
  1. Route:
    The Route component renders a UI component when the path matches the current URL.
   import { Route } from 'react-router-dom';

   const Home = () => <div>Home Component</div>;

   <Route path="/home" component={Home} />;
  1. Link:
    The Link component is used to navigate between different routes, providing a declarative way to create navigation links.
   import { Link } from 'react-router-dom';

   const Navigation = () => (
     <nav>
       <Link to="/home">Home</Link>
       <Link to="/about">About</Link>
       <Link to="/contact">Contact</Link>
     </nav>
   );
  1. Switch:
    The Switch component renders the first Route or Redirect that matches the current location. This helps to ensure that only one route is rendered at a time.
   import { Switch, Route } from 'react-router-dom';

   const App = () => (
     <Switch>
       <Route path="/home" component={Home} />
       <Route path="/about" component={About} />
       <Route path="/contact" component={Contact} />
     </Switch>
   );
  1. Redirect:
    The Redirect component is used to redirect to a different route.
   import { Redirect } from 'react-router-dom';

   <Redirect from="/old-path" to="/new-path" />;

This is just a basic introduction to React Router. It provides more advanced features like nested routes, route parameters, and route guarding. React Router is widely used in React applications to manage navigation and create a seamless user experience in single-page applications.

Routing is the process of defining endpoints for client’s requests. These endpoints work in conjunction with the browser’s location and history objects. They are used to identify requested content so that JavaScript can load and render the appropriate user interface

React does not have standard Rounting libaray. but with React Router libaray we can implement Routing in React app

Installation React App

npm install react-router-dom –save

Basic Example

example.js

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

index.html

<div id="root"></div>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './example';

ReactDOM.render(
<App />,
document.getElementById('root')
);

URL Parameters Example

example.js

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

// Params are placeholders in the URL that begin
// with a colon, like the `:id` param defined in
// the route in this example. A similar convention
// is used for matching dynamic segments in other
// popular web frameworks like Rails and Express.
export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();
  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}


index.html

<div id="root"></div>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './example';

ReactDOM.render(
<App />,
document.getElementById('root')
);

Leave a Comment