Navegación entre rutas

Clase 11 de 30 • Curso de React 17 con Webpack 5 y Sass

Contenido del curso

Introducción a React

Configurando el entorno de desarrollo para React

Maquetación en React

Páginas, rutas y componentes

Lógica con React Hooks

Deploy

Próximos pasos

Tomar examen

Kenneth Angulo L

student•

Me tomo un tiempo conectar el rompecabezas con todas las actualziaciones que han ocurrido, aqui dejo un resumen:.

Ano 2022:

Hace unas semanas salio React18
React router dom esta en su version 6 RRD6

. Entonces: En el archivo index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './routes/App';

// ESTO YA NO FUNCIONA
// ReactDOM.render(
//     <App />,
//     document.getElementById('root')
// );

//AHORA ES ASI
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App tab="home" />);

Modificacion de las rutas En el archivo App.jsx

import React from 'react'
import { BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
import PasswordRecovery from '../containers/PasswordRecovery';
import NotFound from '../pages/NotFound';
import Layout from '../containers/Layout';
import Login from '../containers/Login';
import Home from '../pages/Home';
import '../styles/global.css';

const App = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Routes>
                    <Route path="/" element={<Home/>} />
                    <Route path="/home" element={<Navigate to="/" />} />
                    <Route path="/login" element={<Login />} />
                    <Route path="/password-recovery" element={<PasswordRecovery />} />
                    <Route path="*" element={
                    	<div style={{ padding: "1rem" }}><p>There's nothing here!</p></div>
                    }/>
                </Routes>
            </Layout>
        </BrowserRouter>
    );
};

export default App;

Por si acaso, otras rutas de ejemplo que les pueden ser utiles, para otros casos

 {/* ----------------  otros ejemplos -----------------*/}
<Route path="/path/:parametro" element={<Posts/>} />
<Route path="/anidamiento/*" element={<Dashboard/>}>
             <Route path="ruta1" element={<Users/>} />
             <Route path="ruta2" element={<Posts/>} />
</Route>

 {/* ejemplos con redirect ahora (rrdom-6) es navigate */}
<Route path="/not-found" element={<NotFound />} />
<Route path="*" element={<Navigate to="/not-found" />} />

Julian Franco

student•

Muchas gracias, me puedes explicar por favor dos cosas, la primera a mi me error con Layaout y la segunda

Esta parte

 tab="home"

Que es lo que hces con esto ?

Kenneth Angulo L

student•

Cual error te esta saliendo, si puedes compartirlo por favor.

A mime pasaba un error antes y era por esto:

En las reglas del React Router Dom, dicen que dentro del componete <Routes> solo pueden vivir componentes <Route> asi:

<BrowserRouter>
            <Layout>
                <Routes>
                    <Route path="/" element={<Home/>} />

Entonces verificar que el <Layout> esta afuera de <Routes> para que no interfiera con las rutas. Como muestro en el codigo de ejemplo. . Bueno y por otro lado, lo del tab="home" es solo un ejemplo, el codigo lo saque de la guia de actualizacion de react 18 y asi estaba escrito. Realmente eso no lo necesitamos, olvide borarlo. . Esto lo que esta haciendo es pasarle por props al componente App el valor home Aunque la documentacion no esta clara, creo que esto se usa para cuando usemos navegacion por tabs, es util cuando se hacen aplicaciones para movile.

Navegación entre rutas

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM