React Router - Navegación y Rutas

1import React from "react";
2import ReactDOM from "react-dom/client";
3import { BrowserRouter } from "react-router-dom";
4import App from "./App";
5
6ReactDOM.createRoot(document.getElementById("root")).render(
7  <React.StrictMode>
8    <BrowserRouter>
9      <App />
10    </BrowserRouter>
11  </React.StrictMode>
12);

1import { Routes, Route } from "react-router-dom";
2import Home from "./pages/Home";
3import About from "./pages/About";
4import Contact from "./pages/Contact";
5
6function App() {
7  return (
8    <Routes>
9      <Route path="/" element={<Home />} />
10      <Route path="/about" element={<About />} />
11      <Route path="/contact" element={<Contact />} />
12    </Routes>
13  );
14}

1import { NavLink } from "react-router-dom";
2
3function Navbar() {
4  return (
5    <nav>
6      <NavLink to="/" className={({ isActive }) => (isActive ? "active" : "")}
7      >
8        Inicio
9      </NavLink>
10      <NavLink to="/about">Acerca</NavLink>
11      <NavLink to="/contact">Contacto</NavLink>
12    </nav>
13  );
14}