Crear nuestro archivo de Rutas

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

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

Recien tuve un tipo en App.js

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

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


export default App;

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

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;

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.

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.

El mejor profesor

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>
);```

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

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.

excelente explicación, se entiende muy bien. Gracias

Como se relaciona este manejo de rutas con el backend?

Para solucionar el problema cuando se cambia el nombre a ‘Home’ esto fue lo que hice:

1. Correr el comando

npm i react-router-dom --save

1. Cambiar el import de BrowserRoute y Route por

import { BrowserRouter, Route } from 'react-router-dom';

Me sale este error al correr el nom run start:

    ERROR in ./src/assets/styles/components/Footer.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/assets/styles/components/Footer.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):
    Error: Cannot find module 'node-sass'
    Require stack:
    - E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\sass-loader\lib\loader.js
    - E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\loader-runner\lib\loadLoader.js
    - E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\loader-runner\lib\LoaderRunner.js
    - E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack\lib\NormalModule.js
    - E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack\lib\NormalModuleFactory.js
    - E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack\lib\Compiler.js
    - E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack\lib\webpack.js
    - E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack-dev-server\bin\webpack-dev-server.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
        at Function.Module._load (internal/modules/cjs/loader.js:725:27)
        at Module.require (internal/modules/cjs/loader.js:952:19)
        at require (internal/modules/cjs/helpers.js:88:18)
        at Object.sassLoader (E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\sass-loader\lib\loader.js:46:72)

Ya probe haciendo un npm rebuild node-sass y hasta reinstalandolo y nada… alguna idea de que puede ser?

react.development.js:315 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.
in App

me genera el siguiente error… que puede estar pasando??

Tengo 2 días con el mismo error, alguien me podría pasar el node_modules y todas las configuraciones?
las he realizado una y otra vez y nada, no se si es mi paquete node_modules.

Para no tener que ejecutar manualmente la fake API, se puede instalar el siguiente paquete

npm install npm-run-all

Después en package.json crear los siguientes scripts.

"start": "npm-run-all -p local-dev server",
"local-dev": "webpack-dev-server --open --mode development",
"server": "json-server --port 3001 --watch initialState.json"

Con esto no es necesario correr cada comando por aparte

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 [email protected] --save
Saludos

Para el/la que no le este funcionando

Asegúrense de instalar json-server…

npm i json-server -g

Al intentar la instalación de react-router-dom me aparecía un error.
¿La razón? React Router requiere de Sass, al paracer. Y este proyecto es de hace rato (supongo que 2019 y yo estoy haciéndolo en el 2021) y al instalar la versión de entonces de Sass se rompía porque me decía que necesitaba Python2 y no sé qué.
El fix fue poner en el package.json la última versión de node-sass

"node-sass": "^6.0.0"

Correr

npm install

Y después de eso sí correr

npm install react-router-dom

Espero que lessirva. 😄

No puedo avanzar en el curso por este error que aparece cuando le cambio el nombre a home

react.development.js:188 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.
in App

Por si necesitan cambiar el puerto de json-server:
json-server --watch initialState.json --port 3004

Tengo todo correcto en código fuente no hay errores sin embargo al ejecutar
npm run start
Aparece el error descrito abajo, ya revise todo estoy haciendo bien las exportaciones
Investigando aplique la solución que aparece en esta URL
https://platzi.com/clases/1079-react-2016/6326-actualizando-a-la-ultima-version-de-react-router/
luego ejecuto nuevamente npm run start y me pedia instalar react-router
npm install --save react-router
pero al final regresa al mismo error
Check the render method of App.
in App

Hola estoy teniendo este error y no se porque si alguien me puede dar una mano
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

recuerden el comando npm install luego de descargar el proyecto del repositorio

Perdón, no se que hice mal pero al clonar el proyecto y crear la rama como indicabas en el vídeo, a mi no me aparece la carpeta containers

Una cosa curiosa es que cuando importamos a BrowserRouter se le cambia el nombre por Router por convención. Esto se hace así:

import { BrowserRouter as Router } from 'react-router-dom'

Que guay, que chulis, en mis comienzos con react ya me andaba metiendo con next.js

buenas tardes quein me puede colaborar, yo copie el proyecto pasado que tengo en mi computadora y comence el proceso con este nuevo curso ya que lo hice diferente, pero me sale un error y yo copie todo tal cual quedo del anterior espero me pueden ayudar llevo dos horas en ello y no se que hacer

excelente que bonito*.*

excelente muy buena clase, estoy en la practica 😄

corre sin problema

react.development.js:167 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.
in App

en qué casos se podría usar el route sin el exact?

Tenia problemas con el json-server pero luego lo instale globalmente con “npm i -g json-server” y todo perfecto

Al día de hoy los links a las imágenes dentro del archivo JSON estan caidos 😦

Excelente clase explica muy bien oscar

Excelente. Vamos avanzando.

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.

Here we go baby!!! 😄

Es posible manejar rutas dinamicas?

¿en el curso pasado se toca el tema de inicializar el json?

Chicos si les sale este error, solo escriban lo siguiente: npm rebuild node-sass

bien

Como Aporte, en lugar de renombrar el archivo “App” como “Home”, podríamos renombrarlo como “Layout”.

npm install -g json-server es un opción pero si no quieres instalarlo global, puedes sacar el -g y después ocupar node_modules/.bin/json-server initialState.json

Si quieren saber más acerca de react route : https://reactrouter.com/web/example/url-params

práctica:

Hola chicos, si no les gusta como se ven las barras de scroll pueden eliminarles en su archivo src/assets/styles/app.scss de la siguiente manera:

  ::-webkit-scrollbar {
    display: none;
  }

Esto es un aporte rescatado del curso de React Js Practico

Si alguien más no puede ejecutar el servidor de la API FAKE y les sale este error:
Lo que deben hacer es abrir PowerShell como administrador y ejecutar el siguiente comando: “Set-ExecutionPolicy Unrestricted”.

Bien explicado el tema de las rutas

//el parentesis significa que esta haciendo un return por default
const App = () => (
    <BrowserRouter>
        <Route exact path="/" component={Home} />
    </BrowserRouter>
);

//también podemos dejarlo así con return explicito:
const App = () => {
    return(
    <BrowserRouter>
        <Route exact path="/" component={Home} />
    </BrowserRouter>
)};

quiero ver la pagina home en mi celular, solo lo puedo visualizar en mi escritorio, puse la ip de mi escritorio en mi celular y no puedo verlo, como puedo visualizar en mi celular el proyecto?

Me parece un muy buen curso.

Primera vez que le doy a npm run start y no se me rompe la app 🤣🤣

aprendiento el manejo de rutas

n

Chivisimo!