Routing avec React

29/12/21 danny

Qu'allons nous faire ?

Nous allons implémenter dans notre projet la fonctionnalité suivante :

Le routing

Le routing est le mécanisme qui permet de naviguer d'une page à une autre sur un site web.

Initialisation

React ne propose pas de module traitant du routing.

La documentation nous donne les conseils suivants
https://reactjs.org/docs/code-splitting.html#route-based-code-splitting

Nous ferons appel à une librairie externe react-router-dom

Le site officiel et le dépôt github sont accessibles aux adresses suivantes
https://reacttraining.com/react-router/
https://github.com/ReactTraining/react-router

Il nous faut installer la dépendance correspondante

# Installer
npm install --save react-router-dom

Tout d'abord nous allons créer quatre fichiers qui seront utilisés dans le routing.

Home.js
Contact.js
About.js
NotFound.js

src/Home.js

import React from 'react'

const Home = () => (
  <p>
    home works!
</p>
)

export default Home

src/Contact.js

import React from 'react'

const Contact = () => (
  <p>
    contact works!
</p>
)

export default Contact

src/About.js

import React from 'react'

const About = () => (
  <p>
    about works!
</p>
)

export default About

src/NotFound.js

import React from 'react'

const NotFound = () => (
  <p>
  NotFound works!
</p>
)

export default NotFound

Enfin le traitement du routing s'effectuera dans le fichier App.js.
Pour complèter effectuons une modification graphique dans les fichiers App.css et Index.css

src/App.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
} from 'react-router-dom'

import './App.css';

import Home from './Home';
import About from './About';
import Contact from './Contact';
import NotFound from './NotFound';


class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <header>
            <section>
              <h1> react-starter </h1>
              <h2> (React version 16.13.1) </h2>
            </section>
            <nav>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
              </ul>
            </nav>
          </header>
          <main>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
              <Route exact path="*" component={NotFound} />
            </Switch>
          </main>
        </div>
      </Router >
    );
  }
}

export default App;

App.css

h1 {
    color: blue;
}

Index.css

body {
  color: black;
  font-weight: 400;
}

Conclusion

Il ne reste plus qu'à tester les scripts suivants.

# développement
npm run start
http://localhost:3000/

# Tests
npm run test

# Compilation
npm run build

# Production
http-server -p 8080 -c-1 build
http://localhost:8080/

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos 4 guides complets

Démarrez avec angular CLI

Gérez le routing

Appliquez le Lazy loading

Intégrez Bootstrap

Je crée mon compte et télécharge mes guides