No tienes acceso a esta clase

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

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

1 D铆as
11 Hrs
26 Min
0 Seg

Route: componentes de navegaci贸n

6/30
Recursos

Aportes 15

Preguntas 5

Ordenar por:

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

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.

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:

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!

Quiero un curso de atajos en Visual Studio Code :3

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

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.

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;

Route: componentes de navegaci贸n

.
Vamos a empezar a crear nuestras primeras rutas con React Router DOM 6 y vamos a utilizar HashRouter.
.
En nuestro archivo App.js vamos a importar algunos componentes desde react-router-dom:
.

  • HashRouter: Primero vamos a necesitar un router, pudo haber sido un BrowserRouter o un MemoryRouter, sin embargo utilizaremos un HashRouter debido a que planeamos desplegarlo en GitHub Pages. Este componente funge de provider.
    .
  • Routes: Contienen a las rutas din谩micas
    .
  • Route: Es la ruta en s铆 e indica qu茅 componente renderizar.

.

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

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;

.
Lo primero que podemos observar es que nuestro componente HashRouter va a contener a los dem谩s componentes, esto porque es un provider. Lo que pongamos adentro que est茅 por de fuera de Routes se va a renderizar en todas las p谩ginas, como en este caso el componente Menu.
.
Como dijimos, vamos a tambi茅n tener nuestras rutas din谩micas dentro de un componente Routes, que sin embargo dependiendo de la versi贸n que estemos utilizando podr铆a cambiar de nombre a Switch por ejemplo.
.
Dentro de Routes tendremos a las rutas Route en s铆, cada una de ellas define una ruta que tiene como propiedades al path y al element. Normalmente este componente no se abre y se cierra, solo se cierra.
.
En nuestro componente Route la propiedad path define la ruta que va despu茅s de /#/. La propiedad element que dependiendo de la versi贸n y el tipo de React Router que estemos utilizando, puede cambiar de nombre a render o component, sin embargo independientemente del nombre que tenga lo que hace es indicar qu茅 componente se va a renderizar cuando accedamos a la ruta definida en la propiedad path.
.
Las rutas definidas en Routes son algo independientes del tipo de router; es decir, que no saben si estamos utilizando un hash router o un browser router. Por lo que si decidimos cambiar el tipo de router no tendremos que modificar las rutas porque por si solas se acoplaran despu茅s de un /#/ si estuvi茅ramos utilizando un HashRouter o directamente despu茅s del / si estamos utilizando un BrowserRouter. Debido a ello en la propiedad path del componente Router ponemos las rutas de forma normal, luego nuestro provider se encargar谩 de ponerle los hashes si este lo requiere.
.
Como podemos contemplar hemos creado varias rutas que renderizar谩n un componente en espec铆fico dependiendo de la ruta en la que estamos. Sin embargo, una de esas rutas es simplemente un * que significa cualquier ruta que no hayamos definido anteriormente, a lo cual vamos a responder renderizando un Not Found. Esta ruta gen茅rica es recomendable posicionarla al final para evitar posibles conflictos; dependiendo de la versi贸n que utilicemos, el colocarlo como primera ruta podr铆a significar que las consecuentes no se lean, dando Not Found para todas las rutas.
.
En cuanto al componente Menu es importante que est茅 por dentro del componente HashRouter debido a que de esta forma va a poder consumir la informaci贸n del provider.
.
Finalmente, se deben de realizar las importaciones correspondientes y la creaci贸n de los componentes que se renderizan en las distintas rutas.
.
Como estamos utilizando lo que es HashRouter si yo en la url no pongo la ruta despu茅s de /#/, entonces no va a funcionar; incluso si pongo cualquier cosa donde se supone que me responda con Not Found, me seguir谩 dando la p谩gina principal.
.

/#/ -> HomePage
/#/blog -> BlogPage
/#/profile -> ProfilePage
/#/lalalala -> Not Found
/blog, /lalala -> HomePage
el comando rafce, con la extensi贸n code snipets en vsc crea el componente autom谩ticamente

Gracias a esta clase pude mejorar un poco un proyecto personal que hab铆a hecho anteriormente, que pasa el proyecto es una tienda de tenis(calzados) entonces quer铆a que todo el nav bar y el footer se expadiera por toda la aplicaci贸n y poder buscar los articulos. Antes de este cambio tenia el footer y el header harcodeado en cada una de las pantallas y solo en la pantalla de home podia hacer las busqueda de los productos. Pero con el cambio todo mejor贸 aqu铆 le dejo un antes y un despu茅s. Las partes subrayadas en rojo fueron agregadas con el nuevo cambio!

ANTES

import React from "react";
import { Route, Routes } from "react-router-dom";

import "./App.css";

import { useUserContext } from "./context/userContext";

import { auth } from "./firebase/credenciales";
import { onAuthStateChanged } from "firebase/auth";

import {
  Home,
  Product,
  Profile,
  Cart,
  Checkout,
  Login,
  NotFound,
} from "./views";

function App() {
  const { user, setUser } = useUserContext();
  onAuthStateChanged(auth, (firebaseUser) => {
    firebaseUser ? setUser(firebaseUser) : setUser(null);
  });
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="product/:id" element={<Product />} />
      <Route path="profile" element={<Profile />} />
      <Route path="cart" element={<Cart />} />
      <Route path="checkout" element={<Checkout />} />
      <Route path="login" element={<Login />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

DESPUES


ARCHIVO HOME.JSX

ANTES

import React, { useState, useEffect } from "react";
import styled from "styled-components";

import Header from "../components/header";
import ItemCard from "../components/ItemCard";

import getActiveProducts from "../functions/getActiveProducts";

import Hero from "../assets/images/inicio.jpg";


const Home = () => {
  const [products, setProducts] = useState(null);
  const [searchValue, setSearchValue] = useState("");
  let searchedItems = [];

  useEffect(() => {
    async function getProducts() {
      const products = await getActiveProducts();
      setProducts(products);
    }
    getProducts();
  }, []);

  if (!searchValue.length >= 1) {
    searchedItems = products;
  } else {
    searchedItems = products.filter((product) => {
      const productName = product.name.toLowerCase();
      const searchText = searchValue.toLowerCase();
      return productName.includes(searchText);
    });
  }

  return (
    <Container>
      <HeroContainer>
        <Header setSearchValue={setSearchValue} searchValue={searchValue} />
        <HeroImage src={Hero} alt="hero" />
      </HeroContainer>
      <ListContainer>
        {searchedItems
          ? searchedItems.map((itemProduct) => (
              <li key={itemProduct.id}>
                <ItemCard product={itemProduct} />
              </li>
            ))
          : null}
      </ListContainer>
    </Container>
  );
};

export default Home;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  @media (min-width: 768px) {
    gap: 10px;
    align-items: center;
    justify-content: space-around;
  }
`;

const ListContainer = styled.ul`
  padding: 0;
  list-style: none;
  justify-content: center;
  @media (min-width: 768px) {
    gap: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (min-width: 1440px) {
    grid-template-columns: repeat(4, 1fr);
  }
`;

const HeroContainer = styled.picture`
  width: 100%;
`;

const HeroImage = styled.img`
  width: 100%;
  height: auto;
  min-width: 288px;
  background-size: cover;
`;
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;

Asi es como se hace el router 19 sep 2023

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import BlogPage from './pages/BlogPage.jsx'
import HomePage from './pages/HomePage.jsx'
import ProfilePage from './pages/ProfilePage'
import Menu from './Menu'

const router = createBrowserRouter([
  {
    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>,
)

Todo esto lo hice desde el archivo main, ya no fue necesario hacerlo en el archivo app