Route 
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from "react-router-dom" 
import Home from "./pages/Home"
import About from "./pages/About"

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}

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

The Route component renders different elements at different URL paths. Made inside the Routes component.

Routes Router
createRoutesFromElements 
import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom'; 
import Layout from './Layout.js';
import Home from './Home.js';
import About from './About.js';

const router = createBrowserRouter(createRoutesFromElements(
  <Route path='/' element={<Layout />}>
    <Route index element={<Home />}/>
    <Route path="/about" element={<About />}/>
  <Route/>
));
 
export default function App () {
  return (
    <RouterProvider router={ router } />
  );
}

If using createBrowserRouter instead, use this helper function to use Route components.

Routes Router
Layout Route 
Layout Component:
import React from "react"
import { Outlet } from "react-router-dom"
import Header from "./Header"
import Footer from "./Footer"

export default function Layout() {
return (
  <>
    <Header /> 
    <main>
    <Outlet />
    </main>
    <Footer />
  </>
 )
};

Layout Route with Routes:
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom" 
import Home from "./pages/Home"
import About from "./pages/About"
import Layout from "./components/Layout"

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

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

Concept, a parent route without a path, a container for child routes and components, providing a layout with different sections such as a header, footer, sidebar, and any other UI elements. Outlet represents children.

Routes Router
Title Link 
<Start Code Here

Information

Routes Router
Index Route 
Layout Route within another Layout Route:
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="/about" element={<About />} />
      
      {/* Both Layout and CarsLayout displayed 
          with CarsLayout Children at /cars/child using 
          Relative Path Routing and Index */}

      <Route path="cars" element={<CarsLayout />}>
        <Route index element={<Cars />} /> {/* displayed at /cars */} 
        <Route path="sale" element={<CarSale />} /> {/* displayed at /cars/sale */} 
        <Route path="reviews" element={<Reviews />} /> {/* displayed at /cars/reviews */} 
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

Index Routes refer to their parent toute. The default child route to be rendered with parent layout route.

Routes Router
Nested Routes 
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// Import your different book category components
import Home from './components/Home';
import AllBooks from './components/AllBooks';
import FictionBooks from './components/FictionBooks';
import NonFictionBooks from './components/NonFictionBooks';
import Layout from './components/Layout';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
        </Route>
        <Route path="/books" element={<Layout />}>        
          <Route index element={<AllBooks />} /> {/* renders at /books */}
          <Route path="fiction" element={<FictionBooks />} /> {/* renders at /books/fiction */}
          <Route path="non-fiction" element={<NonFictionBooks />} /> {/* renders at /books/non-fiction */}
        </Route>
      </Routes>
    </Router>
  );
};

export default App; 

Query Parameters:

Information

Routes Router