Guía para principiantes de React Router

O lo que desearía saber al comenzar con React Router.

Haga clic aquí para ir al repositorio de Github Este tutorial usa React Router versión 2.0.1 y Babel versión 6.7.4

React Router es la biblioteca de enrutamiento estándar para React. De los documentos:

“React Router mantiene su interfaz de usuario sincronizada con la URL. Tiene una API simple con funciones poderosas como carga diferida de código, coincidencia de ruta dinámica y manejo de transición de ubicación integrado. Haga de la URL su primer pensamiento, no un pensamiento posterior ".

Paso 1. Primeros pasos

Para comenzar, puede clonar el repositorio de inicio y saltar al paso dos, o seguir los siguientes pasos y configurar su proyecto manualmente.

Configuración manual

Primero, configuremos nuestro entorno con React, Babel y webpack. Primero cree una carpeta y cd en ella. Luego ejecute npm init -y:

npm init -y
  • -Y solo responde sí a todas las preguntas

A continuación, instale react, react-router y react-dom y guárdelos como dependencias:

npm i react react-dom [email protected] --save

A continuación, instale nuestras dependencias de desarrollo. Estos serán webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015 y babel-preset-react

npm i webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

Ahora, creemos los archivos de configuración para webpack y babel:

touch .babelrc webpack.config.js

A continuación, creemos una carpeta para nuestro código. A esta carpeta la llamaremos aplicación:

mkdir app

En el directorio de la aplicación, cree tres archivos: index.html app.js main.js

cd apptouch index.html app.js main.js

Nuestra estructura de archivos ahora debería verse así:

Ahora, abra el archivo .babelrc y agregue los ajustes preestablecidos para react y ES2015:

{ "presets": [ "es2015", "react" ]}

En webpack.config.js, agregue la siguiente configuración para comenzar:

module.exports = { entry: './app/main.js', output: { path: './app', filename: 'bundle.js' }, devServer: { inline: true, contentBase: './app', port: 8100 }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' } ] }}
Si desea obtener más información sobre webpack y babel, consulte mi tutorial sobre cómo comenzar con webpack.

Ahora que webpack y babel están configurados. Creemos un acceso directo para webpack-dev-server. Abra package.json e inserte el siguiente script en la clave "scripts":

"scripts": { "start": "webpack-dev-server"}

Ahora, podemos ejecutar npm start para comenzar nuestro proyecto.

Ahora configuremos nuestro HTML y React. Abra index.html y cree una página html base. Luego, agregue un div con el ID de root y una etiqueta de script que haga referencia a bundle.js:

    React Router 

Ahora, vayamos a nuestro main.js y configuremos un punto de entrada para nuestra aplicación. Escriba esto en su archivo main.js:

import React from 'react'import ReactDOM from 'react-dom'import App from './app'ReactDOM.render(, document.getElementById('root'))

Ahora, vayamos a app.js y creemos nuestro componente de aplicación. Abra app.js y escriba lo siguiente:

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
const App = () =>

Hello World!

export default App

Todavía no estamos usando Component ni ninguno de los componentes Router / react-router, pero los estamos incorporando para que podamos comenzar en el paso dos.

Ahora, si ejecuta el proyecto y navega a // localhost: 8100 /, debería obtener 'Hello World !!!!!!' en tu pantalla:

npm start

Paso 2. Enrutamiento básico

Establezcamos una ruta básica. Reemplazaremos el componente App con una clase React, que devolverá un componente Router. El enrutador envolverá todas las rutas que vamos a definir.

Cada ruta se identificará en un componente. El componente tendrá dos propiedades: ruta y componente. Cuando una ruta coincide con la ruta dada al componente, devolverá el componente especificado.

En app.js, refactorice el componente de la aplicación para que se vea así:

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component { render() { return (     ) }}
const Home = () =>

Hello from Home!

const Address = () =>

We are located at 555 Jackson St.

export default App

Ahora, si navega a // localhost: 8100 / debería ver nuestro componente de inicio, y si navega a // localhost: 8100 / # / address debería ver nuestro componente de dirección.

Notarás que hay cadenas aleatorias después del hash en tu barra de direcciones:

Al usar el historial de hash, verá un elemento adicional en su cadena de consulta que se parece a _k = 123abc. Esta es una clave que usa el historial para buscar datos de estado persistentes en window.sessionStorage entre cargas de página. Leer más aquí.

Si desea una dirección más limpia, o la está usando en producción, puede buscar en browserHistory vs hashHistory. Al usar browserHistory, debe tener un servidor que siempre devolverá su servidor en cualquier ruta, por ejemplo, si usa nodejs, una configuración como la siguiente (de los documentos) funcionaría:

const express = require('express')const path = require('path')const port = process.env.PORT || 8080const app = express()// serve static assets normallyapp.use(express.static(__dirname + '/public'))// handle every other route with index.html, which will contain// a script tag to your application's JavaScript file(s).app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, 'public', 'index.html'))})app.listen(port)console.log("server started on port " + port)

Para obtener más información sobre el historial del navegador, consulte este enlace.

Para el resto de este tutorial, usaremos hashHistory.

Paso 3. Ruta 404

Ahora bien, ¿qué pasa si nos topamos con una ruta que no está definida? Configuremos una ruta 404 y un componente que regresará si no se encuentra la ruta:

const NotFound = () => ( 

404.. This page is not found!

)

Ahora, debajo de nuestra ruta '/ dirección', cree la siguiente ruta:

Ahora, si navegamos a alguna ruta que no ha sido definida (// localhost: 8100 / # / asdfasdf), deberíamos ver nuestra ruta 404.

Paso 4. IndexRoute y enlaces

Ahora, agreguemos navegación para pasar de una página a otra.

Para hacer esto, usaremos el componente. es similar a usar una etiqueta de anclaje HTML.

De los documentos:

La forma principal de permitir que los usuarios naveguen por su aplicación. generará una etiqueta de ancla totalmente accesible con el href adecuado.

Para hacer esto, primero creemos un componente de navegación. Nuestro componente de navegación contendrá componentes y se verá así:

const Nav = () => ( Home  Address )

Now we need a way to make our Nav component persistent across all pages. To do this, we will wrap our child routes in a main component. We will also need to update our Home component, and create a new component called Container:

Container:

const Container = (props) => {props.children} 

{props.children} will allow any routes wrapped within this route to be rendered in this component.

Now, let’s rewrite our App component to look like this. We are wrapping our HomePage, Address and NotFound routes inside the new Container route. We are also setting HomePage to be our IndexRoute. That means that when we hit //localhost:8100, our Home component will render, as it is specified as the index:

class App extends Component { render () { return (        ) }}

For reference, our full app.js code should look like this.

Now, when we navigate to //localhost:8100, we should see our Home Component rendered, along with our Nav components!

Step 5. Multiple child / IndexRoutes

Now, let’s say we want to nest a twitter feed and an Instagram feed in our address component. Let’s create that functionality.

First, let’s rewrite our address route to take two new components: InstagramFeed and TwitterFeed:

class App extends Component { render () { return (           ) }}

We’ve set the IndexRoute of address to be TwitterFeed, and have added the Instagram route there as well.

Now, let’s create our InstagramFeed and TwitterFeed components. These will be very basic just so we know we’ve hit the correct routes:

const Instagram = () =>

Instagram Feed

const TwitterFeed = () =>

Twitter Feed

Finally, go into the Address component, and add the Links to the new components as well as props.children, so the components will be rendered:

const Address = (props) =>

Twitter Feed  Instagram Feed

We are located at 555 Jackson St.

{props.children}

Now, when we navigate to //localhost:8100/#/address, the address component should be rendered as well as the TwitterFeed component:

For reference, the code up to now should look like this.

Step 6. activeStyle / activeClassName and IndexLink

Ahora veremos cómo aplicar estilo a un enlace en función de si la ruta está activa. Hay dos formas principales de hacer esto, ya sea agregando estilo directamente o mediante una clase.

De los documentos:

puede saber cuándo la ruta a la que se vincula está activa y aplicar automáticamente un activeClassName y / o activeStyle cuando se le da cualquier prop. Estará activo si la ruta actual es la ruta vinculada o cualquier descendiente de la ruta vinculada. Para que el enlace esté activo solo en la ruta enlazada exacta, utilice en su lugar o establezca la opciónonlyA ctiveOnIndex.

Primero, veamos activeStyle. Para aplicar activeStyle, simplemente agregue activeStyle como una propiedad a a y pase el estilo que le gustaría tener:

Home

Actualicemos nuestro componente de navegación para implementar esto:

const Nav = () => ( Home  Address  About )

Ahora, echemos un vistazo a cómo se ve esto en nuestro navegador. Puede notar que cuando hace clic en la dirección, esa página de inicio sigue resaltada:

Esto se debe a que cuando se usa junto con activeStyle, estará activo si la ruta actual es la ruta indicada o cualquier descendiente de la ruta indicada.

Esto significa que debido a que Address es un descendiente de Home, permanece resaltado. Para solucionar esto, podemos pasar la propiedad onlyActiveOnIndex a nuestro componente Link:

Home

Ahora, cuando miramos nuestro navegador, el enlace solo se resaltará si estamos en el enlace exacto:

También hay un componente hermano de called. que solo está activo cuando la ruta actual es exactamente la ruta vinculada.

De los documentos:

An es como a, excepto que solo está activo cuando la ruta actual es exactamente la ruta vinculada. Es equivalente a con el conjunto de props onlyActiveOnIndex.

Para implementar esto, primero traiga desde react-router:

import { ..., IndexLink } from 'react-router'

Ahora, simplemente reemplace los componentes en nav con componentes:

const Nav = () => ( Home  Address  About )

Ahora, ¿qué tal agregar clases frente a estilos? Para hacer esto, podemos usar activeClassName. Configuremos un estilo activo en nuestro index.html:

 .active { color:#53acff }

Ahora, reemplazaremos activeStyle con activeClassName en nuestro componente Nav:

const Nav = () => ( Home  Address  About )

Como referencia, nuestro código ahora debería verse así.

Paso 7. Componentes nombrados

Usando Componentes nombrados, podemos especificar componentes como accesorios a un.

De los documentos:

Cuando una ruta tiene uno o más componentes con nombre, los elementos secundarios están disponibles por nombre en this.props. En este caso, this.props.children no estará definido. Todos los componentes de la ruta pueden participar en el anidamiento.

Ahora profundicemos en el código y veamos cómo se vería realmente.

First, let’s create a new Component that will be rendering our Named Components. These components will be available as props:

const NamedComponents = (props) => ( {props.title}

{props.subTitle} )

Next, let’s create two new components called Title and Subtitle:

const Title = () => ( 

Hello from Title Component

)const SubTitle = () => (

Hello from SubTitle Component

)

Now, let’s create a new route for our NamedComponents component, and define the Title and Subtitle components in the IndexRoute:

Finally, let’s add a link to our nav to navigate to this component:

Named Components

Now, we should see our new Named Components link when we look at our browser, and when clicking on the link we should see our Title and SubTitle components rendering on the screen:

For reference, our code should now look like this.

Step 8. Route Parameters

An essential part of many applications is the ability to read route parameters from a url.

To implement this, let’s revisit our About component. First, let’s rewrite the path in our Router to take an optional parameter, we’ll call it name:

Now, let’s rewrite our About component to use this name variable:

const About = (props) => ( 

Welcome to the About Page

{props.params.name}

)

Now, if we visit //localhost:8100/#/about/nader we will see my name displayed below “Welcome to the About Page”.

The only issue here is that if we revisit //localhost:8100/#/about, we get a 404 because there is no name parameter. To fix this, we can make the parameter optional by wrapping it in parenthesis:

Now, if we visit //localhost:8100/#/about we no longer get a 404, and can still access the name variable.

We can also take this one step further by checking to see if props.name is available and displaying some content:

{ props.params.name && 

Hello, {props.params.name}

}

Now, the content will only be shown if there is a name parameter available.

For reference, our code should now look like this.

Step 9. Query String Parameters

You can also pass in query strings as props to any component that will be rendered at a specific route, and access these parameters as props.location.query.

To see how this works, let’s create a new component called Query, and render a property called props.location.query.message:

const Query = (props) => ( 

{props.location.query.message}

)

Now, let’s set up our new Query Route within the address route we already have created:

...   ...

Finally, let’s link to this route by creating a new Link component, and passing in a query string called message and giving it a value. This is done in the ‘to’ property that we have already used.

Instead of passing a link to ‘to’, we instead pass in an object the the pathname and query properties defined:

Route Query

Now, if we click on our Route Query link, we should see our message rendered on the screen:

For reference, our code should now look like this.

Eso cubre muchos casos de uso básicos para comenzar con React Router.

Mi nombre es Nader Dabit. Soy un desarrollador en School Status, donde ayudamos a los educadores a tomar decisiones educativas inteligentes al proporcionar todos sus datos en un solo lugar. Visítanos en @ schoolstatusapp. Si te gusta React y React Native, echa un vistazo a nuestro podcast - React Native Radio en Devchat.tv. Gracias por tu tiempo