React Router

React Router + React Router DOM

1. Instalarea dependințelor

Pentru a gestiona navigarea între paginile aplicației, vom utiliza librăria react-router.

Închidem terminalul din directorul client (dacă rulează deja serverul de dezvoltare) și instalăm pachetele necesare rulând următoarea comandă:

npm i react-router react-router-dom sonner

2. Structurarea aplicației și crearea paginilor principale

În directorul src, creăm un nou folder numit pages. Acesta va conține componentele React corespunzătoare fiecărei pagini din aplicație, pentru o structură clară și scalabilă.

Codul pentru pagina de Homepage, pentru care vom crea fișierul HomePage.jsx:

// client/src/pages/Homepage.jsx
import React from 'react'

export default function HomePage() {
  return (
    <div className="h-screen bg-linear-to-br from-blue-50 to-indigo-100 px-4 sm:px-6 lg:px-8 flex items-center justify-center overflow-hidden">
      <div className="max-w-4xl text-center">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">
          Welcome to Our Store!
        </h1>
        <p className="text-xl text-gray-600 mb-8">
          Discover the best products at competitive prices
        </p>
        <a
          href="/products"
          className="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg transition duration-200"
        >
          View Products
        </a>
      </div>
    </div>
  )
}

Codul pentru pagina de Products, pentru care vom crea fișierul ProductsPage.jsx:

// client/src/pages/ProductsPage.jsx
import { useState } from 'react'

export default function ProductsPage() {
  const [products, setProducts] = useState([])

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold text-gray-900 mb-8">Our products</h1>
        
        {products.length === 0 ? (
          <div className="text-center text-gray-600 text-xl">
            No products available at the moment.
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {products.map((product) => (
              <div
                key={product._id}
                className="bg-white rounded-lg shadow-md hover:shadow-lg transition duration-200 p-6"
              >
                <h2 className="text-xl font-semibold text-gray-900 mb-2">
                  {product.name}
                </h2>
                <p className="text-gray-600 mb-4">{product.description}</p>
                <div className="flex justify-between items-center">
                  <span className="text-2xl font-bold text-indigo-600">
                    ${product.price}
                  </span>
                  <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded transition duration-200">
                    Add to Cart
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

3. Routing în React cu React Router

Pentru a gestiona navigarea între paginile aplicației, vom crea un fișier dedicat configurării rutelor. Acesta va mapa URL-urile către componentele React corespunzătoare.

În directorul client, creăm fișierul router.jsx, care va conține structura principală de rutare utilizând createBrowserRouter din react-router-dom.

// client/src/router.jsx
import { createBrowserRouter } from 'react-router-dom'
import App from './App'
import HomePage from './pages/HomePage'
import ProductsPage from './pages/ProductsPage'

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: 'products',
        element: <ProductsPage />,
      },
    ],
  },
])

💡 Cum funcționează createBrowserRouter?

createBrowserRouter este o funcție din react-router-dom care permite definirea structurii de navigare a aplicației folosind History API din browser. Aceasta mapează fiecare URL la o componentă React, fără a reîncărca pagina, facilitând astfel navigarea în stil Single Page Application (SPA).

Pe scurt, createBrowserRouter:

• construiește un arbore de rute

• asociază fiecare cale (path) cu o componentă (element)

• permite rutare ierarhică (nested routes) — componente părinte care găzduiesc copii prin <Outlet />

• gestionează automat istoricul de navigație (back, forward)

• generează un router ce va fi transmis spre aplicație prin RouterProvider

Acest mecanism permite încărcarea doar a componentelor necesare în funcție de URL, îmbunătățind performanța și experiența utilizatorului în aplicațiile React moderne.

4. Inițializarea aplicației în main.jsx

Fișierul main.jsx reprezintă punctul de intrare al aplicației React.

În această etapă, atunci când aplicația este montată în DOM, se activează modul de verificare StrictMode, se integrează store-ul Redux pentru gestionarea stării globale și se atașează sistemul de rutare prin RouterProvider.

Acest fișier asigură bootstrap-ul aplicației, încărcând toate funcționalitățile de bază înainte ca utilizatorul să interacționeze cu interfața.

// client/src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import { RouterProvider } from 'react-router-dom'
import './index.css'
import { router } from './router.jsx'
import { store } from './store/store.js'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </StrictMode>,
)

Rolul componentelor din main.jsx

• StrictMode – activarea modului strict în React; ajută la detectarea problemelor potențiale în aplicație, precum efecte secundare neașteptate sau metode depășite. Nu afectează comportamentul aplicației în producție.

• Provider – wrapper-ul oferit de react-redux care furnizează store-ul aplicației tuturor componentelor. Astfel, componentele pot accesa și modifica starea globală prin useSelector și useDispatch.

• RouterProvider – componenta care primește router-ul creat cu createBrowserRouter și gestionează navigarea între pagini fără reîncărcarea paginii, permițând implementarea unei aplicații de tip SPA (Single Page Application).

5. Structura principală a aplicației în App.jsx

Fișierul App.jsx definește layout-ul de bază al aplicației.

Componentele comune, cum ar fi bara de navigație (Navbar), sunt montate aici o singură dată și rămân vizibile pe toate paginile.

Conținutul specific fiecărei rute este redat prin intermediul componentei <Outlet />, care acționează ca un punct de inserție pentru componentele rutei curente.

// client/src/App.jsx
import { Outlet } from 'react-router-dom'
import { Toaster } from 'sonner'
import Navbar from "./components/Navbar"

export default function App() {
  return (
    <>
      <Navbar />
      <Toaster />
      <Outlet />
    </>
  )
}

Cum funcționează Outlet în App.jsx

• Navbar – componenta fixă care rămâne vizibilă pe toate paginile aplicației.

• Toaster - componenta care ne oferă posibilitatea de a afișa mesaje de tip toast ca și răspuns de la requesturi

• <Outlet /> – punctul de inserție pentru componentele definite în router. Orice componentă asociată unei rute (ex. HomePage, ProductsPage) va fi redată aici, în funcție de URL-ul curent.

Această abordare permite implementarea rutării nested și separarea clară între layout și conținutul specific paginilor.

6. Actualizarea componentei Navbar

// client/src/components/Navbar.jsx
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { Bars3Icon, XMarkIcon, UserCircleIcon } from '@heroicons/react/24/outline'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { logout } from '../store/slices/userSlice'
import { classNames } from '../utils/tailwind'

const navigation = [
  { name: 'Homepage', href: '/' },
  { name: 'Products', href: '/products' },
]

export default function Navbar() {
  const location = useLocation()
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const loggedIn = useSelector((state) => state.user.loggedIn)

  const isActive = (href) => {
    return location.pathname === href
  }

  const handleAuthClick = () => {
    if (loggedIn) {
      dispatch(logout())
      navigate('/')
    } else {
      navigate('/login')
    }
  }
  return (
    <Disclosure as="nav" className="relative bg-gray-800">
      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div className="relative flex h-16 items-center justify-between">
          <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
            {/* Mobile menu button*/}
            <DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-white/5 hover:text-white focus:outline-2 focus:-outline-offset-1 focus:outline-indigo-500">
              <span className="absolute -inset-0.5" />
              <span className="sr-only">Open main menu</span>
              <Bars3Icon aria-hidden="true" className="block size-6 group-data-open:hidden" />
              <XMarkIcon aria-hidden="true" className="hidden size-6 group-data-open:block" />
            </DisclosureButton>
          </div>
          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
            <div className="flex shrink-0 items-center">
              <img
                alt="Your Company"
                src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
                className="h-8 w-auto"
              />
            </div>
            <div className="hidden sm:ml-6 sm:block">
              <div className="flex space-x-4">
                {navigation.map((item) => (
                  <Link
                    key={item.name}
                    to={item.href}
                    aria-current={isActive(item.href) ? 'page' : undefined}
                    className={classNames(
                      isActive(item.href) ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-white/5 hover:text-white',
                      'rounded-md px-3 py-2 text-sm font-medium',
                    )}
                  >
                    {item.name}
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
            {/* Profile dropdown */}
            <Menu as="div" className="relative ml-3">
              <MenuButton className="relative flex rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">
                <span className="absolute -inset-1.5" />
                <span className="sr-only">Open user menu</span>
                <UserCircleIcon className="size-8 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10 text-gray-400" />
              </MenuButton>

              <MenuItems
                transition
                className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg outline outline-black/5 transition data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
              >
                <MenuItem>
                  <a
                    href="#"
                    className="block px-4 py-2 text-sm text-gray-700 data-focus:bg-gray-100 data-focus:outline-hidden"
                  >
                    Your profile
                  </a>
                </MenuItem>
                <MenuItem>
                  <a
                    href="#"
                    className="block px-4 py-2 text-sm text-gray-700 data-focus:bg-gray-100 data-focus:outline-hidden"
                  >
                    Settings
                  </a>
                </MenuItem>
                <MenuItem>
                  <button
                    onClick={handleAuthClick}
                    className="block w-full text-left px-4 py-2 text-sm text-gray-700 data-focus:bg-gray-100 data-focus:outline-hidden hover:bg-gray-100"
                  >
                    {loggedIn ? 'Sign out' : 'Sign in'}
                  </button>
                </MenuItem>
              </MenuItems>
            </Menu>
          </div>
        </div>
      </div>

      <DisclosurePanel className="sm:hidden">
        <div className="space-y-1 px-2 pt-2 pb-3">
          {navigation.map((item) => (
            <DisclosureButton
              key={item.name}
              as="a"
              href={item.href}
              aria-current={isActive(item.href) ? 'page' : undefined}
              className={classNames(
                isActive(item.href) ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-white/5 hover:text-white',
                'block rounded-md px-3 py-2 text-base font-medium',
              )}
            >
              {item.name}
            </DisclosureButton>
          ))}
        </div>
      </DisclosurePanel>
    </Disclosure>
  )
}

Analiza modificărilor în Navbar

1. Navigație și evidențierea rutei active

• În versiunea finală, s-a introdus useLocation din react-router-dom pentru a determina ruta curentă.

• Funcția isActive(href) compară location.pathname cu link-urile din navigation și aplică stilul corespunzător elementului activ (bg-gray-900 text-white).

• Impact: Navbar-ul devine dinamic și evidențiază automat pagina curentă fără a necesita modificări manuale ale proprietății current.

2. Link-urile desktop și mobile

• Desktop: <Link> din react-router-dom înlocuiește <a>, permițând navigație SPA fără reload.

• Mobile: <DisclosureButton> folosește isActive pentru stilizarea elementului activ în meniul dropdown.

3. Meniul de profil

• Icon-ul și opțiunile (Your profile, Settings, Sign out) rămân neschimbate.

• Folosirea @headlessui/react și aria attributes asigură accesibilitate și comportament consistent pentru dropdown.

4. Mobile menu (DisclosurePanel)

• Lista de navigație este generată din același array navigation.

• Se aplică același principiu isActive pentru a marca vizual link-ul corespunzător rutei curente.

5. Sign in / Sign out

• În toate meniurile (desktop și mobile), butonul de autentificare folosește funcția handleAutoClick.

• Aceasta navighează către /login dacă utilizatorul nu este logat sau face logout și redirecționează către / dacă utilizatorul este deja logat.

• Impact: Navigația și autentificarea sunt consistente pe toate dispozitivele, fără duplicare de logică sau comportamente diferite între desktop și mobil.

7. Actualizarea componentei HomePage

Odată cu instalarea librăriei react-router, putem beneficia de foarte multe hook-uri și metode, printre care și metoda de Link care ne ajută să redirecționăm utilizatorul către altă pagină, fără să dăm refresh la pagină.

Astfel, edităm componenta de HomePage și înlocuim hyperlink-ul cu componenta de Link.

// client/src/pages/HomePage.jsx
import { Link } from 'react-router'

export default function HomePage() {
  return (
    <div className="h-screen bg-linear-to-br from-blue-50 to-indigo-100 px-4 sm:px-6 lg:px-8 flex items-center justify-center overflow-hidden">
      <div className="max-w-4xl text-center">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">
          Welcome to Our Store!
        </h1>
        <p className="text-xl text-gray-600 mb-8">
          Discover the best products at competitive prices
        </p>
        <Link
          to="/products"
          className="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg transition duration-200"
        >
          View Products
        </Link>
      </div>
    </div>
  )
}