Guide du débutant sur React Router

Ou ce que j'aurais aimé savoir en commençant avec React Router.

Cliquez ici pour accéder au repo Github Ce tutoriel utilise React Router version 2.0.1 et Babel version 6.7.4

React Router est la bibliothèque de routage standard pour React. À partir de la documentation:

«React Router maintient votre interface utilisateur synchronisée avec l'URL. Il dispose d'une API simple avec des fonctionnalités puissantes telles que le chargement de code paresseux, la correspondance d'itinéraires dynamiques et la gestion des transitions d'emplacement intégrées.

Étape 1. Premiers pas

Pour commencer, vous pouvez soit cloner le référentiel de démarrage et passer à l'étape deux, soit suivre les étapes suivantes et configurer votre projet manuellement.

Configuration manuelle

Commençons par configurer notre environnement avec React, Babel et webpack. Créez d'abord un dossier et un cd dedans. Puis exécutez npm init -y:

npm init -y
  • -y répond simplement oui à toutes les questions

Ensuite, installez react, react-router et react-dom et enregistrez-les en tant que dépendances:

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

Ensuite, installez nos dépendances de développement. Ce seront webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015 et babel-preset-react

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

Maintenant, créons les fichiers de configuration pour webpack et babel:

touch .babelrc webpack.config.js

Ensuite, créons un dossier pour notre code. Nous appellerons cette application de dossier:

mkdir app

Dans le répertoire de l'application, créez trois fichiers: index.html app.js main.js

cd apptouch index.html app.js main.js

Notre structure de fichiers devrait maintenant ressembler à ceci:

Maintenant, ouvrez le fichier .babelrc et ajoutez les préréglages pour react et ES2015:

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

Dans webpack.config.js, ajoutez la configuration suivante pour nous aider à démarrer:

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 vous souhaitez en savoir plus sur webpack et babel, consultez mon tutoriel sur le démarrage de webpack.

Maintenant que le webpack et babel sont configurés. Créons un raccourci pour webpack-dev-server. Ouvrez package.json et insérez le script suivant dans la clé «scripts»:

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

Maintenant, nous pouvons simplement lancer npm start pour démarrer notre projet.

Configurons maintenant notre HTML et React. Ouvrez index.html et créez une page html de base. Ensuite, ajoutez un div avec l'id de root, et une balise de script référençant bundle.js:

    React Router 

Maintenant, allons dans notre main.js et mettons en place un point d'entrée pour notre application. Tapez ceci dans votre fichier main.js:

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

Maintenant, allons dans app.js et créons notre composant d'application. Ouvrez app.js et saisissez ce qui suit:

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

Hello World!

export default App

Nous n'utilisons pas encore Component ou l'un des composants Router / React-Router, mais nous les intégrons afin que nous puissions commencer à l'étape deux.

Maintenant, si vous exécutez le projet et accédez à // localhost: 8100 /, vous devriez obtenir «Hello World !!!!!!» sur votre écran:

npm start

Étape 2. Routage de base

Configurons un itinéraire de base. Nous remplacerons le composant App par une classe React, qui renverra un composant Router. Le routeur encapsulera toutes les routes que nous allons définir.

Chaque itinéraire sera identifié dans un composant. Le composant prendra deux propriétés: chemin et composant. Lorsqu'un chemin correspond au chemin donné au composant, il renverra le composant spécifié.

Dans app.js, refactorisez le composant App pour qu'il ressemble à ceci:

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

Maintenant, si vous accédez à // localhost: 8100 /, vous devriez voir notre composant Home, et si vous accédez à // localhost: 8100 / # / address, vous devriez voir notre composant Address.

Vous remarquerez qu'il y a des chaînes aléatoires après le hachage dans votre barre d'adresse:

Lorsque vous utilisez l'historique de hachage, vous verrez un élément supplémentaire dans votre chaîne de requête qui ressemble à _k = 123abc. Il s'agit d'une clé que l'historique utilise pour rechercher des données d'état persistantes dans window.sessionStorage entre les chargements de page. En savoir plus ici.

Si vous souhaitez une adresse plus propre ou si vous l'utilisez en production, vous pouvez consulter browserHistory vs hashHistory. Lorsque vous utilisez browserHistory, vous devez avoir un serveur qui retournera toujours votre serveur sur n'importe quelle route, par exemple si vous utilisez nodejs, une configuration comme celle-ci (à partir de la documentation) fonctionnerait:

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)

Pour en savoir plus sur browserHistory, consultez ce lien.

Pour le reste de ce didacticiel, nous utiliserons hashHistory.

Étape 3. Route 404

Maintenant, que se passe-t-il si nous empruntons une route qui n'est pas définie? Configurons une route 404 et un composant qui reviendra si la route n'est pas trouvée:

const NotFound = () => ( 

404.. This page is not found!

)

Maintenant, sous notre route '/ address', créez la route suivante:

Maintenant, si nous naviguons vers une route qui n'a pas été définie (// localhost: 8100 / # / asdfasdf), nous devrions voir notre route 404.

Étape 4. IndexRoute et liens

Maintenant, ajoutons la navigation pour nous amener entre les pages.

Pour ce faire, nous utiliserons le composant. est similaire à l'utilisation d'une balise d'ancrage html.

À partir de la documentation:

Le principal moyen de permettre aux utilisateurs de naviguer dans votre application. rendra une balise d'ancrage entièrement accessible avec le href approprié.

Pour ce faire, créons d'abord un composant Nav. Notre composant Nav contiendra des composants et ressemblera à ceci:

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.

Étape 6. activeStyle / activeClassName et IndexLink

Nous allons maintenant voir comment appliquer un style à un lien en fonction du fait que l'itinéraire est actif. Il existe deux méthodes principales pour ce faire, soit en ajoutant du style directement, soit via une classe.

À partir de la documentation:

peut savoir quand la route à laquelle il est lié est active et appliquer automatiquement un activeClassName et / ou activeStyle lorsque l'un des prop. Le sera actif si la route actuelle est soit la route liée, soit un descendant de la route liée. Pour que le lien ne soit actif que sur l'itinéraire lié exact, utilisez à la place ou définissez la propriétéonlyA ctiveOnIndex.

Tout d'abord, regardons activeStyle. Pour appliquer activeStyle, il vous suffit d'ajouter activeStyle en tant que propriété à a et de transmettre le style que vous aimeriez avoir:

Home

Mettons à jour notre composant Nav pour implémenter ceci:

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

Now, let’s take a look at how this looks in our browser. You may notice that when you click on address, that Home is still highlighted:

This is because when using along with activeStyle, the will be active if the current route is either the linked route or any descendant of the linked route.

This means that because Address is a descendent of Home, it stays highlighted. To fix this, we can pass the onlyActiveOnIndex property to our Link component:

Home

Now, when we look at our browser, the link will only be highlighted if we are on the exact link:

There is also a sibling component of called . that is only active when the current route is exactly the linked route.

From the docs:

An est comme a, sauf qu'il n'est actif que lorsque l'itinéraire actuel est exactement l'itinéraire lié. C'est équivalent à avec le jeu d'accessoires onlyActiveOnIndex.

Pour implémenter cela, commencez par importer depuis react-router:

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

Maintenant, remplacez simplement les composants dans la navigation par des composants:

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

Maintenant, que diriez-vous d'ajouter des classes et des styles? Pour ce faire, nous pouvons utiliser activeClassName. Configurons un style actif dans notre index.html:

 .active { color:#53acff }

Maintenant, nous allons remplacer activeStyle par activeClassName dans notre composant Nav:

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

Pour référence, notre code devrait maintenant ressembler à ceci.

Étape 7. Composants nommés

En utilisant des composants nommés, nous pouvons spécifier un composant comme accessoire d'un fichier.

À partir de la documentation:

Lorsqu'une route a un ou plusieurs composants nommés, les éléments enfants sont disponibles par nom sur this.props. Dans ce cas, this.props.children sera indéfini. Tous les composants de l'itinéraire peuvent participer à l'imbrication.

Let’s now dig into the code and see how this would actually look.

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.

Cela couvre de nombreux cas d'utilisation de base pour démarrer avec React Router.

Mon nom est Nader Dabit. Je suis développeur chez School Status où nous aidons les éducateurs à prendre des décisions pédagogiques intelligentes en fournissant toutes leurs données en un seul endroit. Consultez-nous sur @ schoolstatusapp.Si vous aimez React et React Native, consultez notre podcast - React Native Radio sur Devchat.tvSi vous avez apprécié cet article, veuillez le recommander et le partager! Merci pour votre temps