React Router

React Router es una librería que se utiliza bastante con React y que nos facilita el proceso de definir las rutas de navegación dentro de nuestra aplicación. Al igual que el propio React, esta librería (react router) usa una metodología declarativa en vez de imperativa.

01. Instalar React Router - Utilizaremos el instalador de Node.js a través de npm (también se puede utilizar cualquier otro manejador de paquetes, yarn, pmpm, etc.) Hay que instalarlo en el directorio de nuestro proyecto.

npm i react-router-dom

02. Importar el componente React Router - Luego de instalar react-router-dom, vamos a proceder a importarlo dentro de nuestro archivo Main.jsx o aquel que hayamos definido como manejador principal de componentes.

import { BrowserRouter } from "react-router-dom";

03. Aplicar Browser Router en Main.jsx - Para comenzar a utilizar la navegación debemos envolver nuestros componentes que van a aparecer en Main.jsx con BrowserRouter en lugar de usar React.StrictMode

import React from 'react';
import ReactDOM from 'react-dom';
import './indice.css';
import App from './Aplicacion';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
    <BrowserRouter>
      //mis componentes a mostrar
      <App />
    </BrowserRouter>
)

De esta manera estamos importando el componente BrowserRouter en la raiz de nuestra aplicación.

04. Utilización de Link, Route y Routes - El primer paso es importar dentro de App.jsx los componentes desde la libreria react-router-dom.

Para navegar entre distintas "páginas" utilizabamos la etiqueta Anchor a href, en la cual le indicábamos una ruta específica hacia donde dirigirse.

En React vamos a utilizar el componente Link. También le vamos a poder asignar estilos mediante className.

<Link className='boton' to="/galeria"></Link>

Por otro lado, debemos definir nuestras rutas hacia donde apuntar los Links. Para ello utilizaremos Routes en dónde Route será el destino de cada componente. Ambas etiquetas deben cerrarse.

import {Link, Route, Routes} from 'react-router-dom'
export const App (){
    return(
        <Routes>
            <Route index path="/" element={<Main />} />
            <Route path="/nosotros" element={<Nosotros />} />
            <Route path="/contacto" element={<Contacto />} />
        </Routes>
    )
}

Route está compuesto por dos partes, la ruta --> path="/nombreruta" que será la dirección que utilizaremos en la etiqueta Link.
También debemos definir que componente va a mostrarse y para ello agregamos el atributo element={Componente}, será en donde indicaremos que componente debe "llamar".

<Route path="/nosotros" element={<Nosotros />} />

import { Link, Outlet, Route, Routes } from 'react-router-dom'
import { BrowserRouter } from 'react-router-dom'
import ReactDOM from 'react-dom'
import React from 'react'


export const Home = () => {
    return (
        <div>Pagina Principal</div>
    )
}
export const Productos = () => {
    return (
        <div>Aca van los productos</div>
    )
}
export const Contacto = () => {
    return (
        <div>telefono</div>
    )
}

const App = () => {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">Home</Link>
                <Link to="/productos">Producto</Link>
                <Link to="/contacto">Contacto</Link>
            </nav>

            <Routes>
                <Route index path="/" element={<Home />} />
                <Route index path="/productos" element={< Productos />} />
                <Route index path="/contacto" element={< Contacto />} />
            </Routes>
        </BrowserRouter>
    )
}

export default App