React Router DOM

"react-router-dom" is a React library used for page navigation and transitions within Mogart Network. This library offers features such as responding to changing URLs, dynamic routing, creating links, using routing parameters, and implementing route protection.

To use the "react-router-dom" package, follow these steps:

Install the Package: Navigate to your project directory in the terminal or command prompt and run the following command to install the "react-router-dom" package:

npm install react-router-dom

Usage within the Application: Import the necessary components into the relevant components or pages where you want to use "react-router-dom":

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

Adding the Router Component: Add the <Router> component in the main or top-level component of your application:

function App() {
  return (
    <Router>
      {/* Pages and routes will be added here */}
    </Router>
  );
}

Defining Pages and Routes: Use the <Route> component to define pages and routes. For example:

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Us</h1>;
}

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

Adding Navigation Links with the Link Component:Use the <Link> component to add navigation links between pages:

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About Us</Link></li>
      </ul>
    </nav>
  );
}