Premiers pas avec React Router

Hello World avec React et React Router

Une fois que vous avez installé react et react-router, il est temps de les utiliser ensemble.

La syntaxe est très simple, vous spécifiez “l’url” et le “composant” que vous voulez rendre lorsque cette URL est ouverte

<Route path="hello" component={ HelloComponent } />

Cela signifie que lorsque le chemin de l’URL est hello, rendez le composant HelloComponent

FILENAME : app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory, Link } from 'react-router';

// These are just demo components which render different text.

let DashboardPage = () => (
  <div>
    <h1>Welcome User</h1>
    <p>This is your dashboard and I am an example of a stateless functional component.</p>
    <Link to="/settings">Goto Settings Page</Link>
  </div>
)

let SettingsPage = () => (
  <div>
    <h1>Manage your settings</h1>
    <p>display the settings form fields here...or whatever you want</p>
    <Link to="/">Back to Dashboard Page</Link>
  </div>
)

let AuthLoginPage = () => (
  <div>
    <h1>Login Now</h1>
    <div>
      <form action="">
        <input type="text" name="email" placeholder="email address" />
        <input type="password" name="password" placeholder="password" />
        <button type="submit">Login</button>
      </form>
    </div>
  </div>
)

let AuthLogoutPage = () => (
  <div>
    <h1>You have been successfully logged out.</h1>
    <div style={{ marginTop: 30 }}>
      <Link to="/auth/login">Back to login page</Link>
    </div>
  </div>
)

let ArticlePage = ({ params }) => (
  <h3>Article {params.id}</h3>
)

let PageNotFound = () => (
  <div>
    <h1>The page you're looking for doesn't exist.</h1>
  </div>
)

// Here we pass Router to the render function.
render( (
    <Router history={ browserHistory }>

      <Route path="/" component={ DashboardPage } />
      <Route path="settings" component={ SettingsPage } />

      <Route path="auth">
        <IndexRoute component={ AuthLoginPage } />
        <Route path="login" component={ AuthLoginPage } />
        <Route path="logout" component={ AuthLogoutPage } />
      </Route>
    
      <Route path="articles/:id" component={ ArticlePage } />

      <Route path="*" component={ PageNotFound } />

    </Router>
  ), document.body );

Paramètres de routage : le chemin du routeur peut être configuré pour prendre des paramètres afin que nous puissions lire la valeur du paramètre au niveau du composant. Le chemin dans <Route path="articles/:id" component={ ArticlePage } /> a un /:id. Cette variable id sert de paramètre de chemin et est accessible au niveau du composant ArticlePage en utilisant {props.params.id}.

Si nous visitons http://localhost:3000/#/articles/123 alors {props.params.id} au niveau du composant ArticlePage sera résolu en 123. Mais en visitant l’url http://localhost:3000 /#/articles, ne fonctionnera pas car il n’y a pas de paramètre id.

Le paramètre route peut être rendu facultatif en l’écrivant entre une paire de parenthèses : <Route path="articles(/:id)" component={ ArticlePage } />

Si vous souhaitez utiliser des sous-routes, vous pouvez le faire

<Route path="path" component={ PathComponent }>
  <Route path="subpath" component={ SubPathComponent } />
</Route>

lorsque /path est accédé, PathComponent sera rendu
lorsque /path/subpath est accédé, PathComponent sera rendu et SubPathComponent lui sera passé en tant que props.children

Vous pouvez utiliser path="*" pour intercepter toutes les routes qui n’existent pas et afficher la page 404 page introuvable.

Commencer

Ce * démarrage * suppose que vous travaillez avec [create-react-app] [1], ou quelque chose d’équivalent en utilisant Babel et tous les goodies là-bas.

Consultez également l’excellente documentation [ici] [2].

Tout d’abord, installez react-router-dom :

npm install react-router-dom ou yarn add react-router-dom.

Ensuite, créez un composant qui existe d’une barre de navigation de base avec deux éléments et des pages de base :

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

const Home = () => (
  <div>
    <p>We are now on the HOME page</p>
  </div>
)

const About = () => (
  <div>
    <p>We are now on the ABOUT page</p>
  </div>
)

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <hr/>
      <Route path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </BrowserRouter>
)
export default App

Passons étape par étape à travers ce code :

import React from 'react' : assurez-vous d’importer React
import { BrowserRouter as Router, Route, Link } from 'react-router-dom' divisé :
BrowserRouter est le routeur lui-même. Assurez-vous d’envelopper votre composant dans le composant “BrowserRouter”.
Route est une route particulière qui peut être naviguée vers
Link est un composant qui produit une balise <a href="...">, que vous pouvez utiliser comme lien hypertexte.

const Home est une fonction qui renvoie la page d’accueil.
const About est une fonction qui retourne la page About.

const App est le composant principal :
<BrowserRouter> est le composant [JSX][3] qui encapsule les composants dans lesquels vous souhaitez utiliser le composant <Route>.
‘
est un élément unique pour envelopper tout JSX à l'intérieur duBrowserRouter`.
<ul> est la barre de navigation. Il contient un lien vers Accueil et un lien vers À propos.
<li><Link to="/">Accueil</Link></li> renvoie à la page d’accueil. Vous pouvez voir que, puisque le lien fait référence à “/”, un chemin relatif vide rend la page d’accueil.
<li><Link to="/about">À propos</Link></li> renvoie à la page À propos.
<Route path="/" component={Home}/> décrit quel composant doit être rendu si le chemin relatif est "/".
<Route path="/about" component={About}/> décrit quel composant doit être rendu si le chemin relatif est "/about".

Beaucoup à apprendre d’ici, mais j’espère que cela explique les principes fondamentaux, afin qu’à partir d’ici vous puissiez continuer vos apprentissages.

[1] : https://www.wikiod.com/fr/reactjs/premiers-pas-avec-react#Créer une application React [2] : https://reacttraining.com/react-router/web/guides/quick-start [3] : https://www.wikiod.com/fr/reactjs/jsx

Installation et configuration

Pour installer React Router, exécutez simplement la commande npm

npm install --save react-router

Et tu as fini. C’est littéralement tout ce que vous avez à faire pour installer le routeur React.

Veuillez noter : react-router dépend de react, alors assurez-vous d’installer également react.

Installer:

en utilisant un transpileur ES6, comme babel

import { Router, Route, Link } from 'react-router'

n’utilisant pas de transpileur ES6

var Router = require('react-router').Router
var Route = require('react-router').Route
var Link = require('react-router').Link

Installation à l’aide de la version UMD

Une version est également disponible sur npmcdn. Vous pouvez inclure le script comme ceci :

<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>

La bibliothèque sera disponible globalement sur window.ReactRouter.

Premiers pas avec React Router

Hello World avec React et React Router #

Commencer #

Installation et configuration #

Installation à l’aide de la version UMD #

Hello World avec React et React Router

Commencer

Installation et configuration

Installation à l’aide de la version UMD