SPA

SPA stands for Single-Page Application, which is a web application that dynamically updates its content without requiring a full page reload. It achieves this by loading the initial HTML, CSS, and JavaScript resources and then dynamically fetching data and updating the DOM as users interact with the application.

React Router is a JavaScript library used in React applications to handle routing and navigation. It provides a declarative way to define the routes of an application and render different components based on the current URL. React Router allows developers to create a seamless, client-side navigation experience within a SPA by mapping URLs to specific components and managing the history and URL changes.

React Router

npm i react-router-dom

App.jsx

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <h2>home page</h2>,
  },
  {
    path: "/about",
    element: (
      <div>
        <h2>about page</h2>
      </div>
    ),
  },
]);
const App = () => {
  return <RouterProvider router={router} />;
};
export default App;

Setup Pages

• pages are components
• create src/pages
• About, Cocktail, Error, HomeLayout, Landing, index.js
• export from index.js

pages/index.js

export { default as Landing } from "./Landing";
export { default as About } from "./About";
export { default as Cocktail } from "./Cocktail";
export { default as HomeLayout } from "./HomeLayout";
export { default as Error } from "./Error";

App.jsx

import { HomeLayout, About, Landing, Error, Cocktail } from "./pages";

Nested Pages

App.jsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomeLayout />,
    children: [
      {
        path: "landing",
        element: <Landing />,
      },
      {
        path: "cocktail",
        element: <Cocktail />,
      },
      {
        path: "newsletter",
        element: <Newsletter />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

HomeLayout.jsx

import { Link, Outlet } from "react-router-dom";
const HomeLayout = () => {
  return (
    <div>
      <nav>navbar</nav>
      <Outlet />
    </div>
  );
};
export default HomeLayout;

App.jsx

{
  index:true
  element: <Landing />,
}