No tienes acceso a esta clase

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

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

5 D铆as
9 Hrs
2 Min
34 Seg

Enrutamiento con React Router DOM

4/31
Recursos

Aportes 36

Preguntas 11

Ordenar por:

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

No conoc铆a esa forma usando el hook, lo hac铆a a la antigua de usar el browser router y sus childs ser铆an routes y route por cada ruta, fue interesante

Una no es mejor que la otra, ambas formas son v谩lidas, pero me gusta m谩s esta definici贸n de las rutas.

Que sencillo lo explica, react-router-dom anotado, directo al CV 馃槀

Revisando la documentaci贸n de React Router aparece una alternativa a la soluci贸n que implementa Estefany:

Hola comunidad les comparto unos peque帽os apuntes en Notion, espero les sean de utilidad.
Link aqu铆:
https://bg99astro.notion.site/React-Router-DOM-57c1a76d2a3b4814b459261bc450c763?pvs=4

Comando para instalar react rout

npm install react-router-dom

Peque帽o aporte de un error que comet铆.
escribiendo el codigo puse

const appRoutes 

esto no funciona porque para el uso de los Hooks la funci贸n SIEMPRE debe comenzar con mayuscula, debe ser:

const AppRoutes

Decir que react-router dom tiene diferentes tipos de providers o routers:
BrowserRouter: nos direcciona a las rutas sin la necesidad de un hash 鈥/rute鈥,cuando tenemos acceso total al servidor
HashRouter: agrega un hash a nuestras rutas 鈥#/rute鈥, cuando no tenemos un acceso total al backend
MemoryRouter:almacena sus ubicaciones internamente en una matriz, para cuando queremos tener un mejor manejo del historial de nuestra app
NativeRouter: para reactNative o apps mobiles

Estos son los que inyecta codigo para que puedamos hacer redirecciones, crear rutas,etc

Puntos clave de la clase:

  1. Instalar react router dom: npm install react-router-dom

  2. Importar react-router-dom en componente App :

import { useRouters } from 'react-router-dom'
  1. Encapsular las rutas en una arrow function:
const AppRoutes = () => {
	let routes = useRoutes([
		{ path: '/', element: <Home /> },
		{ path: '/my-account', element :<MyAccount/>},
	])
} 

Nota: tienes que agregar las demas rutas, no olvides que el path de NotFound es '/*'
4. Tu funci贸n app, debe de quedar as铆:

const App = () => {
	return(
		<BrowserRouter>
			<AppRoutes />
		</BrowserRouter>

	)
}

Verificar que VSCode halla importado BrowserRouter, de no ser as铆, toca hacerlo manualmente.
Saludos platzi nautas.

Al instalar npm install react-router-dom
me salieron un monton de errores que no me dejaba instalarlo hice lo siguiente:

rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock
npm cache clean --force

Y volver a instalar los paquetes
npm install

Ya despues si me pudo instalar correctamente.

Con la teacher aprendi a ser mas organizado hay voy
馃ぃ馃ぃ馃ぃ馃ぃ馃ぃ馃ぃ
Me gustar铆a sacarle el # celular esta linda Estefany Aguilar ayayai

Personalmente me gusto esta clase, para poder darle en mi opinion una mejor organizacion separe todo en dos archivos, cree una carpeta Routes/index.jsx en donde estara mi componente que define las rutas

import Home from '../pages/Home';
import MyAccount from '../pages/MyAccount';
import MyOrder from '../pages/MyOrder';
import MyOrders from '../pages/MyOrders';
import NotFound from '../pages/NotFound';
import SignIn from '../pages/SignIn';
import {useRoutes} from 'react-router-dom';

const AppRoutes = ()=>{
    let routes = useRoutes([
      {path: '/',element: <Home/>},
      {path:'/my-order',element: <MyOrder/>},
      {path:'/my-account',element: <MyAccount/>},
      {path:'/my-orders',element: <MyOrders/>},
      {path:'/singin',element: <SignIn/>},
      {path:'/*',element: <NotFound/>},
    ]);
  
    return routes;
  };

export default AppRoutes;

Por otro lado mi componente app quedo un poco mas limpio y un poco mas facil de leer en mi opinion, se ve asi

import {BrowserRouter} from 'react-router-dom';
import AppRoutes from '../../Routes';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <AppRoutes/>
    </BrowserRouter>
  )
}

export default App

Por buena pr谩ctica, se recomienda colocar las p谩ginas que no existen al final, ya que hay alg煤nos lenguajes de backend que son monohilos y son secuenciales, por ende, si anteriormente tenemos una ruta (\*) no va a pasar a la siguiente (/signin) Dato curioso jejeje
```js import { useRoutes } from "react-router-dom"; import Home from "../../Pages/Home"; import MyAccount from "../../Pages/MyAccount"; import MyOrder from "../../Pages/MyOrder"; import MyOrders from "../../Pages/MyOrders"; import NotFound from "../../Pages/NotFound"; import SignIn from "../../Pages/SignIn"; const AppRoutes = () => { const routes = useRoutes([ { path: "/", element: <Home />, }, { path: "/account", element: <MyAccount />, }, { path: "/myorder", element: <MyOrder />, }, { path: "/orderes", element: <MyOrders />, }, { path: "/signin", element: <SignIn />, }, { path: "/*", element: <NotFound />, }, ]); return routes; }; export default AppRoutes; ```Una buena forma de tener un c贸digo mas limpio puede ser crear este componente y luego importarlo en App de la siguiente manera ```js import { BrowserRouter } from "react-router-dom"; import AppRoutes from "../../Components/Routes/Routes"; import "./Index.css"; function App() { return ( <BrowserRouter> <AppRoutes /> </BrowserRouter> ); } export default App; ```
la verdad.. muy bien yo estaba esperando algo as铆 como flask o django... por la costumbre de usar python... pero algo un poquito mas complicado de usar las rutas... pero esto esta brutal... <3
Adoro a la profe Teff, explica de maravilla 馃槶
Hola PlatziNautas, excelente curso por parte de la profe Stephanie como siempre, un solo detalle, les recomiendo que usen la 煤ltima versi贸n de vite, en mi caso particular me saltaron un monton de errores por usar la versi贸n de vite de estte curso (lo arregl茅 borrando los node-modules, el package.json, volviendo a instalar npm y por 煤ltimo instalando la 煤ltima versi贸n de vite).
Para tener el c贸digo m谩s limpio pod茅is extraer las rutas en un fichero e importarlo. 1. Crear el fichero AppRoutes.tsx ```js import { useRoutes } from 'react-router-dom' // Pages // > Auth import SignIn from './signin'; // > General import Home from './home'; import NotFound from './not-found'; import MyAccount from './my-account'; import MyOrder from './my-order'; import MyOrders from './my-orders'; const AppRoutes = () => { let routes = useRoutes([ { path: "/", element: <Home /> }, { path: "/home", element: <Home /> }, { path: "/signin", element: <SignIn /> }, { path: "/my-account/:id", element: <MyAccount /> }, { path: "/my-order/:id", element: <MyOrder /> }, { path: "/my-orders", element: <MyOrders /> }, { path: "*", element: <NotFound /> }, ]); return routes; }; export default AppRoutes; ```2. Importar en App y os queda as铆 de limpio: ```js // React imports import { BrowserRouter } from 'react-router-dom' // Routes import AppRoutes from './AppRoutes' // General Styles import './App.css' const App = () => { return ( <BrowserRouter> <AppRoutes /> </BrowserRouter> ) } export default App ```
Lol idento igual que teff

me gusto mucho esta clase a verdad antes de esto estuve leyendo un poco la documentaci贸n pero aqu铆 entend铆 muy bien todo

El porque se usa un hook en el enrutamiento

La diferencia principal entre useRoutes y react-router-dom es que useRoutes es parte de la biblioteca react-router (v6 en adelante) y es una alternativa m谩s simple para la creaci贸n de enrutadores en aplicaciones de React. Mientras que react-router-dom es la versi贸n anterior de React Router (v5.x) y ofrece una gama m谩s amplia de funcionalidades y componentes para el enrutamiento en aplicaciones de React.

Wow esto es una locura, vamos muy r谩pido, cuando deje de programar hacia esto con python y django.

createBrowserRouter. es el enrutador recomendado para todos los proyectos web de React Router v6.14.0

Me encanta esta definici贸n de las rutas 馃ぉ. Gracias profe!!

Waoooo no sabia que exist铆a el useRoutes. Me parece m谩s simple y permite las rutas anidadas. Vamos a ver como funciona eso

const AppRoutes = () => { let routes = useRoutes([ {path: '/', element: <Home/>}, {path: '/my-account', element: <MyAccount/>}, {path: '/my-order', element: <MyOrder/>}, {path: '/my-orders', element: <MyOrders/>}, {path: '/*', element: <NotFound/>}, {path: '/sign-in', element: <SignIn/>} ]); } En este ejemplo, el '/*' sirve para indicar que ese componente ser谩 el renderizado a cualquier otra ruta que no est茅 indicada en la variable 'routes'

Para usar react-router-dom (continuaci贸n): 2. Dentro de nuestro componente App const App = () => { return ( <BrowserRouter> <AppRoutes/> </BrowserRouter> ); }

Para usar react-router-dom: 1. Podemos crear una funci贸n fuera de nuestro componente, ejemplo function App () {...}, fuera de App declaramos const AppRoutes = () => { let routes = useRoutes([ { path: '/', element: <Home/> } ]); return routes; }

Para enlazar nuestras p谩ginas con una ruta en espec铆fico usamos React Router Dom: 1. npm install react-router-dom 2. Importar en App con import { useRoutes, BrowserRouter } from 'react-router-dom';

React router es genial!!

Realice un cambio porque no me salia: hasta el intento TRES
Intento UNO

export const Home = () => {
  return <div className='bg-rose-300	'>Home</div>
}

Intento DOS

const Home = () => {
  return <div className='bg-rose-300	'>Home</div>
}
export { Home }

Intento TRES

const Home = () => {
  return <div className='bg-rose-300	'>Home</div>
}
export default Home

鈥楻outes鈥 <Ruts>

Que buena profesora es Stefany, clara y b谩sica a la hora de explicar, primera vez que puedo entender las rutas. 馃槂

Me encant贸, todo se instal贸 sin ning煤n problema.

Vaya que si es mas simple el proceso, 隆ME ENCANTA!

TYPESCRIPT: ![](https://static.platzi.com/media/user_upload/carbon-6dbeae4b-8bfe-442c-bfbf-32b2712c4ae7.jpg)