4 min read

Enrutando nuestras vistas con React Router

Cree la estructura de su aplicación y conecte sus vistas con React Router

¿Qué es React Router?


React Router, una biblioteca JS disponible a través de NPM que ayuda principalmente con 2 problemas:

  • Visualización condicional para los componentes React basados en la URL del sitio web actual.
  • Navegación de aplicaciones web sin necesidad de actualizar.
$ npm install --save react-router

¿Por qué necesito esto?


Deje de leer si no está creando aplicaciones completas usando React, no necesita React-Router para aplicaciones de una sola página o componentes pequeños.

Para el resto de nosotros que creamos aplicaciones web reales, necesitamos conectar varias vistas (componentes React) en una sola aplicación grande. Ese proceso se llama "enrutamiento".

Por ejemplo, necesitamos las siguientes URL de aplicación para que coincidan con los siguientes componentes:

react router

Definiendo tus Rutas de Aplicación


¿Qué páginas/vistas quieres que tenga tu aplicación? Siempre puedes empezar con lo básico:

  • Home: Lo que sus usuarios públicos ven cuando llegan a sudominio.com
  • Login/Signup/Forgot: Un formulario de inicio de sesión y un formulario de registro y el formulario de recordatorio de contraseña.
  • Private: Lo que sus usuarios privados ven justo después de iniciar sesión. El resto de las páginas dependen de su aplicación y de cómo desea que los usuarios naveguen por su sitio.

react router

Mapeando tus Vistas a URLs


Este es el mapa del sitio para cualquier sitio web de comercio electrónico típico:

react router

Programación de tus Rutas de Aplicación


Una vez que hayas terminado de asignar las vistas de la aplicación con las URL, puede comenzar a programar todo, ¡y eso es cuando entra en juego React-Router!

La mejor práctica es siempre crear un componente llamado <Layout /> que se encargue de encaminar al usuario a las vistas específicas que debería ver, dependiendo de cada URL en particular.

Este es un ejemplo del mismo mapa de sitio de comercio electrónico pero ahora utiliza React Router v4:

//Este diseño de componente se encargará de enrutar las URL con todas las vistas de mi aplicación
export class Layout extends Flux.View {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <div>
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route exact path="/home" component={Home} />
                            <Route exact path="/log-in" component={Login} />
                            <Route exact path="/sign-up" component={Signup} />
                            <Route exact path="/remind" component={Remind} />
                            <Route exact path="/products" component={Products} />
                            <Route exact path="/category/:category_id" component={Category} />
                            <Route exact path="/product/:product_id" component={SingleProduct} />
                            <Route exact path="/checkout" component={Checkout} />
                            <Route exact path="/profile/:user_id" component={Profile} />
                            <Route render={() => <h1>Not found!</h1>} />
                        </Switch>
                    </div>
                </BrowserRouter>
            </div>
        );
    }
}

Hay 3 componentes para entender aquí:

  • <BrowserRouter> : Cada vez que abres una nueva etiqueta de BrowserRouter, básicamente le estás diciendo a React que todo lo que está en el medio debe ser condicionalmente basado en (URL) particulares.
  • <Switch> : Funciona de manera similar a la instrucción de cambio en Javascript pero para Rutas ... Le dice a React que se mostrará la única que coincide con la URL.
  • <Route> : Es la forma en que React-Router tiene que mapear rutas con componentes, por ejemplo:
<Route exact path="/sign-up" component={Signup} />

tu ruta le dice a React que cuando la URL coincida con "sign-up", debería mostrarse el componente Signup.

Las Etiquetas o Anclas <a> ahora son un problema


Los anclajes llevan a los usuarios a otros sitios web o URL - y eso es sorprendente para un HTML + JS basico - pero ahora NO queremos que nuestros usuarios sean llevados a otros sitios web o URL. Queremos que permanezcan en la misma pestaña pero cargando la página siguiente sin tener que actualizar. Tenemos dos formas posibles de hacer eso:

React Router creó un componente que podemos usar en lugar de <a>

<Link to="/login">Take me to login</Link>

2. Usando this.props.history.push(‘new/url/here’);

React Router siempre pasa a cada vista un elemento llamado "historial" que contiene muchas cosas útiles para usar cuando se enruta a los usuarios. Una de las muchas utilidades es la función "push" que básicamente redirige al usuario a la ruta dada.

<button onClick={() => this.props.history.push("/login")}>Take me to login</button>

Ejemplo en Vivo:


Aquí hay un ejemplo en vivo que utiliza todo lo que hemos aprendido durante esta lectura, haga clic y juega para entenderlo, aprenderlo y repetirlo: