Route: componentes de navegación

No importa si dejamos el path=’*’ al principio ya que react-router implementa un algoritmo que determina la importancia de la ruta, asi que siempre va a dar prioridad a ruta definidas y si despues de eso no encuentra ninguna ahora si renderizaria el *

Un comando interesante para cuando estamos creando nuestros componentes es **rfcp ** o **rafc **(abreviatura de React Functional Component)

Route: componentes de navegación

Vamos a crear nuestras primeras rutas con React 😀.

En nuestro archivo App vamos a importar un par de componentes que nos da React Router DOM:

import { HashRouter, Routes, Route } from 'react-router-dom';

Luego en nuestro componente App vamos a escribir un código de ejemplo para entender como funcionan estos componentes.

function App() {
  return (
    <>
    {/* Este es un provider */}
      <HashRouter>
        <Menu />

        {/* Esta es la parte de la aplicación que va cambiar de 
        manera dinámica según las rutas */}
        <Routes>

          {/* Este componente recibe las propiedades de 'path', que 
          es la ruta deseada y 'element', que es componente que 
          deseamos renderizar */}
          <Route path='/' element={<HomePage />} />
          <Route path='/blog' element={<BlogPage />} />
          <Route path='/profile' element={<ProfilePage />} />

        </Routes>

      </HashRouter>
    </>
  )
}

Podemos agregar una ruta al final que sea para todas las rutas que no hayamos definido, esto lo hacemos añadiendo un ‘*’ en la propiedad path de nuestra ruta, si lo hacemos al final de todas las rutas en caso de que no estén definidas retornará algo que nosotros definamos, con esto por ejemplo podemos crear una página de no encontrado.

<Route path='*' element={<p>Not Found</p>} />

Ahora debemos crear estos componentes que añadimos en los path ya que estos no existen.

HomePage.js

import React from 'react';

function HomePage() {
  return (
    <h1>Home Page</h1>
  );
}

export { HomePage }

BlogPage.js

import React from 'react';

function BlogPage() {
  return (
    <h1>Blog Page</h1>
  );
}

export { BlogPage }

ProfilePage.js

import React from 'react';

function ProfilePage() {
  return (
    <h1>Profile Page</h1>
  );
}

export { ProfilePage }

Menu.js

import React from 'react';

function Menu() {
  return (
    <nav>Menú</nav>
  );
}

export { Menu }

Y los importamos a nuestro archivo App:

import { Menu } from './Components/Menu/Menu';
import { HomePage } from './Components/Routes/HomePage/HomePage';
import { BlogPage } from './Components/Routes/BlogPage/BlogPage';
import { ProfilePage } from './Components/Routes/ProfilePage/ProfilePage';

Si jugamos con la ruta usando los hast navigaror /#/ veremos que efectivamente si funcionan y cargan nuestros componentes.

El atajo de VS Code por default es alt + space
recuerden que deben tener abiertos los componentes para que les de el path.

El código de App.js, por si lo necesitan:

import { HashRouter, Route, Routes } from 'react-router-dom'
import { BlogPage } from './BlogPage';
import { HomePage } from './HomePage';
import { Menu } from './Menu';
import { ProfilePage } from './ProfilePage';
import React from 'react'

function App() {
  return (
    <>
      <HashRouter>
        <Menu/>
        <Routes>//Esta parte va a ser dinamica, osea que va a cambiar dependiendo de la ruta en la que estemos
          <Route path='/' element={<HomePage/>}/>
          <Route path='/blog' element={<BlogPage/>}/>
          <Route path='/profile' element={<ProfilePage/>}/>
          <Route path='/*' element={<p>Not found</p>}/>//Cuando ponemos un asterisco (*) nos referimos a que sea el valor por defecto si las rutas de arriba no se cumple.

        </Routes>
      </HashRouter>
    </>
  );
}

export default App;

Me coloque a experimentar que pasaba si cambiaba el hash con un onClick en el componente <Menu/> y a si fue el resultado.

import React from "react";

export function Menu (){
    return (
        <nav>
            <ul>
                <li onClick={()=>location.hash='#/'}>Home</li>
                <li onClick={()=> location.hash='#/profile'}>Profile</li>
                <li onClick={()=> location.hash= '#/blog'}>BLog Page</li>
            </ul>
        </nav>
    )
}

Asi dinamicamente cambiamos la direccion o el hash de la pagina y el react router atomaticamente nos renderiza los componentes que esten ligados a ese hash

Quiero un curso de atajos en Visual Studio Code :3

En los proyectos en los que he trabajado siempre hemos usado el router de tipo Browser Router y los Hash Router son nuevos para mi por lo que estoy emocionada por aprenderlos!

estoy usando reacto router 6.8 y cambio muchisimo, para usarlo ahora es asi:

import Menu from './Menu';

import './index.css';

//* /#/
//* /#/blog
//* /#/profile
//* /#/lalala -> not found

const router = createHashRouter([
  {
    path: '/',
    element: <HomePage />,
  },
  {
    path: '/blog',
    element: <BlogPage />,
  },
  {
    path: '/profile',
    element: <ProfilePage />,
  },
  {
    path: '*',
    element: <p>Not Found</p>,
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Menu />
    <RouterProvider router={router} />
  </React.StrictMode>
);

ahora se usa create hash router y un routerProvider, para mas info en la documentacion:

import React from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom'
import { HomePage } from './pages/HomePage';
import { BlogPage } from './pages/BlogPage';
import { ProfilePage } from './pages/ProfilePage';
import { Menu } from './components/Menu';

function App() {
  return (
    <>
      <HashRouter>
        <Menu />
        <Routes>
          <Route path='/' element={<HomePage />} />
          <Route path='/blog' element={<BlogPage />} />
          <Route path='/profile' element={<ProfilePage />} />
          <Route path='*' element={<p>Not found</p>} />
        </Routes>
      </HashRouter>
    </>
  );
}

export default App;

Excelente clase!!👏👏, por fin aclare las dudas del Curso Practico de React.
.
😅😅Me atrevo a decir que tome primero el Practico de React. Por que este curso no estaba disponible.