Routing avec React

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
import React from 'react'
const Home = () => (
<p>
home works!
</p>
)
export default Home
import React from 'react'
const Contact = () => (
<p>
contact works!
</p>
)
export default Contact
import React from 'react'
const About = () => (
<p>
about works!
</p>
)
export default About
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
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;
h1 {
color: blue;
}
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
