import './App.css';

import { Routes, Route } from "react-router-dom";

​

import {BrowserRouter} from 'react-router-dom'

​

function App() {

  return (

    < >

<BrowserRouter>   

    <Naavbar/>

​

    <NoteState>

  <Routes>

      <Route path="/" element={<Home />}/>

        <Route exact path="/about" element={<About />} />

    </Routes>

​

    </NoteState>

    </BrowserRouter>

​

  </>

  );

}

​

export default App;

​

​

​

​

import {BrowserRouter,Routes,Route,Navigate,Outlet} from "react-router-dom";

<BrowserRouter>

    <Routes>

        <Route path="/" element={<Navigate to="/main" />} />

        <Route path="/home/*" element={<div><Outlet/></div>}>

            <Route path="page1" element={<h1>home page 1</h1>} />

            <Route path="page2" element={<h1>home page 2</h1>} />

        </Route>

        <Route path="/notification" element={<h1>notification page</h1>} />

        <Route path="/notification/:id" element={<h1>notification details pages</h1>} />

        <Route path="/login" element={<h1> login page </h1>} />

    </Routes>

</BrowserRouter>

import { BrowserRouter, Routes, Route } from "react-router-dom";

​

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/signup" element={<SignUp />} />

        <Route path="/login" element={<Login />} />

      </Routes>

    </BrowserRouter>

  );

}

export default App;

//active route --> react router dom@v6

import * as React from "react";

import {

  Routes,

  Route,

  Outlet,

  Link,

  useMatch,

  useResolvedPath,

} from "react-router-dom";

import type { LinkProps } from "react-router-dom";

​

export default function App() {

  return (

    <div>

      <h1>Custom Link Example</h1>

​

      <p>

        This example demonstrates how to create a custom{" "}

        <code>&lt;Link&gt;</code> component that knows whether or not it is

        "active" using the low-level <code>useResolvedPath()</code> and

        <code>useMatch()</code> hooks.

      </p>

​

      <Routes>

        <Route path="/" element={<Layout />}>

          <Route index element={<Home />} />

          <Route path="about" element={<About />} />

          <Route path="*" element={<NoMatch />} />

        </Route>

      </Routes>

    </div>

  );

}

​

function CustomLink({ children, to, ...props }: LinkProps) {

  let resolved = useResolvedPath(to);

  let match = useMatch({ path: resolved.pathname, end: true });

​

  return (

    <div>

      <Link

        style={{ textDecoration: match ? "underline" : "none" }}

        to={to}

        {...props}

      >

        {children}

      </Link>

      {match && " (active)"}

    </div>

  );

}

​

function Layout() {

  return (

    <div>

      <nav>

        <ul>

          <li>

            <CustomLink to="/">Home</CustomLink>

          </li>

          <li>

            <CustomLink to="/about">About</CustomLink>

          </li>

        </ul>

      </nav>

​

      <hr />

​

      <Outlet />

    </div>

  );

}

​

function Home() {

  return (

    <div>

      <h1>Home</h1>

    </div>

  );

}

​

function About() {

  return (

    <div>

      <h1>About</h1>

    </div>

  );

}

​

function NoMatch() {

  return (

    <div>

      <h1>Nothing to see here!</h1>

      <p>

        <Link to="/">Go to the home page</Link>

      </p>

    </div>

  );

}

​

import React from "react";

import ReactDOM from "react-dom/client";

import {

  createBrowserRouter,

  RouterProvider,

} from "react-router-dom";

​

const router = createBrowserRouter([

  {

    path: "/",

    element: <div>Hello world!</div>,

  },

]);

​

const root=document.getElementById('root');

​

ReactDOM.createRoot(root).render(

  <React.StrictMode>

    <RouterProvider router={router} />

  </React.StrictMode>

);

import * as React from "react";

import {

  Routes,

  Route,

  Outlet,

  Link,

  useMatch,

  useResolvedPath,

} from "react-router-dom";

import type { LinkProps } from "react-router-dom";

​

export default function App() {

  return (

    <div>

      <h1>Custom Link Example</h1>

​

      <p>

        This example demonstrates how to create a custom{" "}

        <code>&lt;Link&gt;</code> component that knows whether or not it is

        "active" using the low-level <code>useResolvedPath()</code> and

        <code>useMatch()</code> hooks.

      </p>

​

      <Routes>

        <Route path="/" element={<Layout />}>

          <Route index element={<Home />} />

          <Route path="about" element={<About />} />

          <Route path="*" element={<NoMatch />} />

        </Route>

      </Routes>

    </div>

  );

}

​

function CustomLink({ children, to, ...props }: LinkProps) {

  let resolved = useResolvedPath(to);

  let match = useMatch({ path: resolved.pathname, end: true });

​

  return (

    <div>

      <Link

        style={{ textDecoration: match ? "underline" : "none" }}

        to={to}

        {...props}

      >

        {children}

      </Link>

      {match && " (active)"}

    </div>

  );

}

​

function Layout() {

  return (

    <div>

      <nav>

        <ul>

          <li>

            <CustomLink to="/">Home</CustomLink>

          </li>

          <li>

            <CustomLink to="/about">About</CustomLink>

          </li>

        </ul>

      </nav>

​

      <hr />

​

      <Outlet />

    </div>

  );

}

​

function Home() {

  return (

    <div>

      <h1>Home</h1>

    </div>

  );

}

​

function About() {

  return (

    <div>

      <h1>About</h1>

    </div>

  );

}

​

function NoMatch() {

  return (

    <div>

      <h1>Nothing to see here!</h1>

      <p>

        <Link to="/">Go to the home page</Link>

      </p>

    </div>

  );

}

1

​