Enrutamiento con React Router DOM

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 😂

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

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

‘Routes’ <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!