Cursos Empresas Blog Live Conf Precios

Crear nuestro archivo de Rutas

Clase 3 de 29 • Curso de React Router 5 y Redux

Clase anteriorSiguiente clase

Resumen

Dentro de nuestro proyecto vamos a crear una carpeta llamada routes donde vamos a ir añadiendo las rutas que necesitemos en la aplicación.

Las rutas que añadamos debemos definirlas con el componente Route y estas deben estar encapsuladas dentro del componente BrowserRouter del paquete de react-router-dom. Para definir una ruta con el componente Route debemos pasarle las props de:

path para indicar la url.
exact si queremos que funcione única y exactamente con la url que le digamos.
component para indicarle el componente que va a renderizar.

Beto Martinez

student•

Excelente clase, Angular se me hace que tiene mejor manejo de rutas, pero cada framework tiene lo suyo!

Jose Daniel Molina

student•

Estoy de acuerdo

Bernardo Aguayo Ortega

student•

agree!

Andrés Felipe Rodríguez Rincón

student•

Yo tuve un pequeño problema con el json-server porque no lo tenía instalado globalmente, ejecutando el siguiente comando sirvio perfecto todo lo demás.

npm install -g json-server

Tomado de: https://www.npmjs.com/package/json-server

Jesus Henao

student•

Gracias! Esto me hacía falta.

omar leonardo barreto palacios

student•

para que funcionara puse npx json-server --watch initialState.json

Juan J. López Lira

student•

De acuerdo a la documentación oficial de React Router en su version 5.1.2 queda de la siguiente forma:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from '../components/Home/Home';

const App = () => (
    <Router>
        <Route exact path="/" component={Home}></Route>
    </Router>
)

export default App;

Daniel Azocar

student•

Hey muy buena tu observacion! me ayudo bastante porque con BrowserRouter no cargaba...

Juan Jose Vega

student•

A mi me funcionó tal cual el video.

Jose Daniel Barría Reyes

student•

Recien tuve un tipo en App.js

import React from &quot;react&quot;;
import { BrowserRouter, Route } from &quot;react-router-dom&quot;;
import Home from &quot;../containers/Home&quot;;

const App = () =&gt;  (
  &lt;BrowserRouter&gt;
    &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
  &lt;/BrowserRouter&gt;)


export default App;

++es con parentesis, no con llaves++. Tarde 15 minutos en darme cuenta jaja!

Bernardo Aguayo Ortega

student•

el parentesis es el default return por si se preguntan

Armando Rivera

student•

También podría ser con llaves pero agregas un return antes de browser

Andrés Campuzano Garzón

student•

Para que no tengan que iniciar el json server manualmente, les recomiendo usar la pagina jsonbin para que suban su initialState.json y lo consuman directamente desde un api real en internet.

César Palma

student•

puedes apuntar ala ruta en el repositorio de github, por ejemplo: https://raw.githubusercontent.com/xsrpm/frontend-nodejs/master/platzi-video/initialState.json

Platzi Gomez

student•

Tuve algunos inconveniente con la aplicación al momento de correrla y tuve que volver al vídeo anterior para ver que versión de react-router-dom le instalo, por suerte instale la misma y funciono

npm install react-router-dom@5.0.1 --save Saludos

Jonathan Forero

student•

Un año después me acabas de salvar.

Gracias!

Percy Tejada

student•

Por si a alguien le gustaría personalizar el llamado de las funciones que importamos de react-router-dom, podemos crearle un alias de esta forma:

import {BrowserRouter as miAlias} from 'react-router-dom';

Podemos asignar el alias que deseamos, claro siendo siempre explícitos para no confundirnos despues con esos nombres.

Platzi Team

student•

Gran aporte compañero, Muchas gracias

Bernardo Aguayo Ortega

student•

thanks bro!!

Jhon Brichman Bellido Vargas

student•

Para la version 6 de react-router-dom tenemos que hacer estos cambios

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../containers/Home';

const App = () => (
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>  
  </BrowserRouter>
);

export default App;

Joel Spinelli

student•

gracias!!

Jairo Colón

student•

Muchas gracias Bro

Sebastián Mera

student•

Curso desactualizado: Las versiones actuales de react-router-domfuncionan con una sintaxis diferente al momento de pasar las rutas y el componente a renderizar.

Kafu De León

student•

El mejor profesor

Oscar Barajas Tavares

Team Platzi•

Estamos para dar lo mejor y apoyarles en todo.

Carlos Vallejo

student•

Para quienes no vienen del Curso Práctico de React. El json-server que ejecuta no es nada más que crear un servidor ficticio en nuestra computadora para que la aplicación de React empiece a consumir un archivo json que nosotros creamos y se llama initialState.json

Robert Alexander Machado Espinoza

student•

ACTUALICEN EL CURSO

Cristian Navarro García

student•

Si por un casual instalan react-router-dom sin indicar una version se instalará la ultima versión, en el momento de escribir esto es 6.3.0, y el prop component de Route no funcionará y se tendría que cambiar por element y ya funcionaria.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from '../containers/Home';

const App = () => (
    <Router>
        <Routes>
            <Route exact path="/" element={<Home />} />
        </Routes>
    </Router>
);

export default App;

jose Alberto Borrego

student•

efectivamente mi bro cada version cambia la sintaxis un poco , BrowserRouter ya no funciona igual

Israel Aboutboul

student•

Para el/la que no le este funcionando

Asegúrense de instalar json-server...

npm i json-server -g

Noe Adrián Acuña Prado

student•

Al principio no me aparecia ningun componente hata que no me fije que tenia

const App = () => {
  <BrowserRouter>
    <Route path="/" component={Home} />
  </BrowserRouter>
};```

y me di cuenta que hay que ponerlo tre parentesis y no entre llaves.

const App = () => ( <BrowserRouter> <Route path="/" component={Home} /> </BrowserRouter> );```

César Palma

student•

El profe lo llamó return explícito a la forma de escribir sin llaves,return y agregando parentesis

Alejandro González Reyes

student•

Siempre que añadamos react-router-dom al proyecto, ¿el componente de rutas será el que debemos renderizar en el DOM?, o existe otra forma de hacerlo

Oscar Barajas Tavares

Team Platzi•

Hay varias formas de hace render y empujar las rutas, la indicada este curso es la mas utilizada.

Sleyder Zuleta

student•

excelente explicación, se entiende muy bien. Gracias

Oscar Barajas Tavares

Team Platzi•

La idea es que puedan entender con claros ejemplos :D

Cesar Augusto Barco de Gouveia

student•

Crear nuestro archivo de Rutas

Se crea en una carpeta llamada routes; en un archivo App.js.

Se importa React y import { BrowserRouter } from 'react-router-dom'.

Creamos un componente básico y lo exportamos.

<BrowserRouter> va a encapsular todas las rutas; traemos otro componente: { BrowserRouter, Route }.

Lo usamos con <Route exact path="/" component={Home} />; importando el componente antes de declarar esto.

Britney Hadassa Ascencio Henriquez

student•

thanks

Javier Romero

student•

alguien me puede ayudar, lo que pasa es que ya tengo instalado todo hasta json-server y cuando ejecuto los comandos, webpack me compila exitosamente, pero no entiendo porque cuando abre mi localhost:8080 no aparece nada, la pagina esta todo en blanco y no entiendo que es lo que le pasa al proyecto, también llame al comando json-server initialState.json en la terminal y también esta igual, la pagina sigue en blanco, que raro ahora que esta pasando ????

Luis Lira

student•

¿podrías pasar una captura de lo que aparezca en la consola de tu navegador? Que aparezca en blanco puede ser porque aunque transpile, esté fallando alguna referencia en el código hacia un archivo o algún punto de entrada de Webpack.

Si puedes pasar el link de tu repo mucho mejor :D

Javier Romero

student•

Luis_LiraC en la terminal, webpack esta compilando exitosamente no tiene ningún tipo de error, igualmente sin olvidarme corrí el json-server y lo veo muy bien de igual manera sin errores, lo que no entiendo es porque sigue la pagina en blanco y no muestra mi proyecto, es muy raro 🤔

Oscar Armando Del Angel Casillas

student•

y que es react router?

Roger Carlos Ariel Alba

student•

Hola,

React Router es una librería para gestionar rutas en aplicaciones que utilicen ReactJS.

Saludos