No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Route: componentes de navegaci贸n

6/30
Recursos

Aportes 11

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸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.