Crear aplicacion multi pagina con React Router Dom

React Router Dom es una libreria de react que nos permite navegar y crear rutas en nuestra aplicacion react sin recargar la pagina, ulti para las SPA (Single Page Apps).

React Router Dom es parte de las librerias basicas o estandar de react por lo que aveces ya esta instalada en un proyecto react, pero para instalarla vamos a usar el comando.

npm i react-router-dom

react-router-dom cuenta con varios componentes para crear manejar nuestras rutas, entre ellos estan: BrowserRouter, Router, Routes

• BrowserRouter nos permite convertir nuestra aplicacion en un navegador, por lo que toda nuestra aplicacion debe estar englobada por BrowserRouter
• Router: Es el componente donde se van a crear o almacenar las diferentes rutas
• Route: Corresponde a una ruta individual , por lo que el componente Router puede tener varias Rutas dentro

Este proyecto lo cree usando el comando.

mkdir myapp123
cd app123
npm create vite@latest

La manera en la que se aplican estos componentes va de la siguiente manera.

Archivo main.jsx

En el archivo main.jsx, el componente aplicacion debe estar dentro de BrowserRouter.

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

Archivo Prueba.jsx

El archivo Prueba.jsx es una vista de prueba.

import React from 'react'
import { useParams } from 'react-router-dom'

export function Prueba(){
    return (
        <>
            <h1>Pagina de prueba</h1>
            <p>Estas es la pagina inicial</p>
        </>
    )
}

export default Prueba

Archivo Products.jsx

El archivo Products.jsx es otra vista de prueba.

import React from 'react'
import { useParams } from 'react-router-dom'

export function Products(){
    return (
        <>
        <h1>Productos</h1>
        <p>Esta es la pagina de productos</p>
    </>

    )
}

export default Products

Archivo App.jsx

El archivo App.jsx es el archivo principal, y desde aqui vamos a crear el enrutador y un menu o nav.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { Prueba} from './Prueba'
import { Products} from './Products'
import { Routes, Route , Link } from 'react-router-dom'


function Inicio() {
  return <h1>Hola Mundo!</h1>;             
}

function App() {

  return (
    <>
    <div>
      <Link to="/">Inicio</Link>
      <Link to="/prueba">Prueba</Link>
      <Link to="/products">Products </Link>
    </div>
      <Routes>
        <Route path="/" element={<Inicio/>}/>
        <Route path="/prueba" element={<Prueba/>}/>
        <Route path="/products" element={<Products/>}/>
      </Routes>
    </>
  )
}

export default App

El componente Route debe tener como parametro path que es la ruta que vamos a escribir o manejar en el navegador y el parametro element hace referencia a un componente de React.

Ahora solo falta ejecutar nuestro proyecto con el comando.

npm run dev