Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
2H
31M
44S
Curso de React Router 5 y Redux

Curso de React Router 5 y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Container: Register

5/29
Recursos

Para asegurar que nuestras rutas solamente se rendericen con la que haga match con la url debemos encapsular las rutas dentro del componente .

Aportes 33

Preguntas 7

Ordenar por:

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

o inicia sesi贸n.

Atributos para los Route Objectos:

  • path: la ruta en la que se renderizar谩 el componente en forma de cadena de texto
  • exact: un booleano para definir si queremos que la ruta tiene o no que ser exacta para renderizar un componente. Eg: /index !== /index/all.
  • strict: un booleano para definir si queremos que el 煤ltimo slash sea tomado en cuenta para renderizar un componente. Eg: /index !== /index/.
  • sensitive: un booleano para definir si queremos distinguir entre min煤sculas y may煤sculas, y tomar esto en cuenta para renderizar un componente. Eg: /index !== /Index
  • component: recibe un componente a renderizar. Crea un nuevo elemento de React cada vez. Esto causa que el componente se monte y desmonte cada vez (no actualiza).
  • render: recibe un m茅todo que retorna un componente. A diferencia de component no remonta el componente.

La diferencia entre poner el switch y no ponerlo es que cuando tienes el mismo path para todos solamente toma el primero y lo renderiza.

<section className='register'>
		<section className='register__container'>
			<h2>Reg铆strate</h2>
			<form className='register__container--form'>
				<input className='input' type='text' placeholder='Nombre' />
				<input className='input' type='text' placeholder='Correo' />
				<input className='input' type='password' placeholder='Contrase帽a' />
				<button className='button'>Registrarme</button>
			</form>
			<a href=''>Iniciar sesi贸n</a>
		</section>
	</section>```

Regisyer.scss

.register {
  background-image: #181818;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0px 30px;
  min-height: calc(100vh - 200px);

  &__container {
    background-color: rgba(255,255,255,0.1);
    border: 2px solid white;
    border-radius: 40px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 600px;
    padding: 60px 68px 40px;
    width: 300px;

    a {
      color: white;
      font-size: 16px;
      text-align: center;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }

    }

    &--form {
      display: flex;
      flex-direction: column;
    }
  }

}

JAJAAJA porque siempre en login y register a oscar le aparece un osito?

A d铆a de hoy, 5 de enero de 2021, ya no se usa 鈥淪witch鈥 para las rutas, se usa 鈥淩outes鈥, quedando entonces nuestro c贸digo de la siguiente forma:

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

const App = () => {
    return (
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Home/>} />
                    <Route path="/login" element={<Login/>} />
                    <Route path="/register" element={<Register/>}/>
                </Routes>
            </BrowserRouter>
    )
};

export default App;

Me queda la duda de como integrar routes con un backend en django. Se me hace interesante.

Interesante lo del componente Switch. que a decir verdad, creo que es innecesario cuando el desarrollador esta atento a los paths.

Switch al igual que la programacion habitutal nos permite, que al primer Match de nuestra ruta haga render de este y termine la busquedad de coincidencias, y volvera a buscar otra Match apenas haya un cambio en el Browser path

Aqui un poco de documentacion para Switch de react-router-dom :
reactrouter.com/core/api/Switch

Les comparto el c贸digo de la clase:

assets/styles/components/Register.scss

.register {
	background-image: linear-gradient(#21c08b, #8f57fd);
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding: 0px 30px;
	min-height: calc(
		100vh - 200px
	); /* El ancho ser谩 igual al tama帽o de todo el height menos 200px (100px del header + 100px del footer) */
}

.register__container {
	background-color: rgba(255, 255, 255, 0.1);
	border: 2px solid white;
	border-radius: 40px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-height: 600px;
	padding: 60px 68px 40px;
	width: 300px;
}

.register__container--form {
	display: flex;
	flex-direction: column;
}

.register__container a {
	color: white;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
}

.register__container a:hover {
	text-decoration: underline;
}```

containers/Register.jsx



import React from 鈥渞eact鈥;
import 鈥溾/assets/styles/components/Register.scss鈥;
const Register = () => {
return (
<section className=鈥渞egister鈥>
<section className=鈥渞egister__container鈥>
<h2>Reg铆strate</h2>
<form className=鈥渞egister__container鈥揻orm鈥>
<input className=鈥渋nput鈥 type=鈥渢ext鈥 placeholder=鈥淣ombre鈥 />
<input className=鈥渋nput鈥 type=鈥渢ext鈥 placeholder=鈥淐orreo鈥 />
<input className=鈥渋nput鈥 type=鈥減assword鈥 placeholder=鈥淐ontrase帽a鈥 />
<button className=鈥渂utton鈥>Registrarme</button>
</form>
<a href="">Iniciar sesi贸n</a>
</section>
</section>
);
};

export default Register;```

routes/App.js

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

const App = () => {
	return (
		<BrowserRouter>
			<Switch>
				<Route exact path="/" component={Home} />
				<Route exact path="/login" component={Login} />
				<Route exact path="/register" component={Register} />
			</Switch>
		</BrowserRouter>
	);
};

export default App;```

Hola.
Estoy siguiendo el curso y hasta el momento no he tenido problemas con el servidor de desarrollo, pues corre con npm run start sin ning煤n problema, pues siempre que hac铆a cambios en los archivos del proyecto autom谩ticamente se pod铆a ver en el navegador.

Sin embargo de un momento a otro dej贸 de hacer esos cambios de manera autom谩tica y cada vez que hago cambios y grabo no se actualiza autom谩ticamente el servidor. Debo terminarlo y volver a iniciarlo con npm run start.

Por favor alguien que me pueda dar alguna ayuda sobre por qu茅 est谩 pasando esto.

Hace que sea muy lento seguir el curso, pues debo terminar el servidor a cada rato y volverlo a lanzar.

Gracias.

A dia de Hoy (28 de Enero de 2023), la version mas reciente de React Router es la 6. Switch en este momento cambio su nombre a Routes. Y las rutas Route no debe especificarse el EXACT, asi como la propiedad COMPONENT pasa a llamarse ELEMENT, y dentro de esta propiedad, el componente a renderizar se pasa como un elemento HTML (element={<MyComponent />})

Pr谩ctica:

Muy bueno!

Siendo hoy 27-Enero-2023, este codigo esta actualizado, por la version de React router dom, y quedaria asi la implementacion:

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

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

export default App;```

A partir de la versi贸n 6 de react router el componente <Switch> no existe m谩s, en su lugar se usa el componente <Routes> para encapsular las rutas.

La diferencia de usar 鈥淪witch鈥 y no usarlo radica en que si no lo usamos y tenemos varioss componentes con el mismo nombre de 鈥榩ath鈥, estos se renderizaran una detras de otro segun el orden en que hayan sido declaradas. Mientras que al usar Switch teniendo varios componentes con el mismo nombre de 鈥榩ath鈥, solo te mostrar谩 el primer container coincidente que haya sido declarado.

Ya que estamos agregando nuestros componentes, vamos a usar un nuevo elemento de parte de React Router Dom donde va a manejar un switch que va a empujar la seccion que necesitamos. Esto haciendo solo RENDER con la primera RUTA que haga match que le indiquemos con esta validacion.

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

const App = () => (
    <BrowserRouter>
    <Switch >
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Registro} />
    </Switch>
    </BrowserRouter>
);

export default App;

la etiqueta de button me marca un error, lo soluciones agregandole la propiedad type=鈥榖utton鈥

<button type='button' className='button'>Registrarme</button>

My Code!!








scss de stylus 鈥

Que cool, antes hab铆a visto switch pero nunca entend铆 su uso, gracias!

Buenas!, no entendi para que es el <Switch>, quien puede explicarme detalladamente para que sirve?, muchas gracias y saludos!.

Excelente

Les comparto mi componente NotFound junto a unos recursos en los cuales podr谩n encontrar ilustraciones open source super geniales:

NotFound:

NotFound.jsx:

import React from 'react';
import NotFoundImage from '../assets/static/hiker-man-colour.svg';
import '../assets/styles/components/NotFound.scss';

const NotFound = () => (
  <>
    <div className='notfound__container'>
      <div className='notfound__heading font__config'>
        <h1 className='notfound__heading--title'>It looks like you are lost</h1>
      </div>
      <div>
        <img className='notfound__image' src={NotFoundImage} alt='Not found' />
      </div>
      <div>
        <button type='button' className='notfound__button font__config'>Go to home</button>
      </div>
    </div>
  </>

);

export default NotFound;

NotFound.scss:

@import '../Vars.scss';

.font__config{
    font-family: $notFound-font;
    color: white;
}

.notfound__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.notfound__heading:hover{
    font-weight: 900;
}

.notfound__image {
    width: 20rem;
    height: 20rem;
}

.notfound__button{
    border-radius: 2rem;
    width: 20rem;
    height: 3rem;
    border: none;
    color: black;
    font-size: 1.4rem;
}

.notfound__button:hover{
    color: white;
    background-color: black;
    transition: backgrund-color 2s ease-in-out 3s ;
}

Recursos de ilustraciones open source gratuitas:

Espero les guste!

Me llama la atenci贸n ese osito que aparece en el navegador de Oscar jajaja.

Apuntes:
Con <Switch></Switch> nos aseguraremos que cuando encuentre solamente la primera ruta, esa es la 煤nica que se va a renderizar.

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

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home} />
      <Route exact path='/login' component={Login} />
      <Route exact path='/register' component={Register} />
    </Switch>
  </BrowserRouter>
);

export default App;

en mi caso los estilos eran los mismos que del logan, importe el mismo archivo . gg well played.

    <section className="register">
        <section className="register__container">
            <h2>Reg铆strate</h2>
            <form className="register__container--form">
                <input className="input" type="text" placeholder="Nombre"/>
                <input className="input" type="text" placeholder="Correo"/>
                <input className="input" type="password" placeholder="Contrase帽a"/>
                <button className="button">Registrarme</button>
            </form>
            <a href="">Iniciar sesi贸n</a>
        </section>
    </section>

As铆 va mi App.js


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

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home} />
      <Route exact path='/login' component={Login} />
      <Route exact path='/register' component={Register} />
    </Switch>
  </BrowserRouter>
);

export default App;

a

Mas comodo y para los que vienen de SPA con Vanilla Javascript se puede:
import {BrowserRouter as Router, Switch, Route} from 鈥榬eact-router-dom鈥