Router ReactJS

Dans ce chapitre, nous allons apprendre à configurer les routes pour l'application.

Numéro1Étape-Installer React Router

une méthode d'installation simplereact-routerest dansInvite de commandeExécuter le segment de code suivant dans la fenêtre.

C:\ Utilisateurs \ Nom_d'utilisateur \ Bureau \ reactApp> npm install react-router

Numéro2Étape-Créer un composant

À cet étape, nous allons créer quatre composants. LeAppLes composants seront utilisés comme menu d'onglets. Après le changement de la route(Home), (About)，(Contact)Les composants seront rendus.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<ul>
　　　　　　　　　　　　<li>Home</li>
　　　　　　　　　　　　<li>About</li>
　　　　　　　　　　　　<li>Contact</li>
　　　　　　　　　　　　</ul>
　　　　　　　　　　　　{this.props.children}
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default App;
class Home extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Home...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default Home;
class About extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>About...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default About;
class Contact extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Contact...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default Contact;

Numéro3Étape-Ajouter le routeur

Maintenant, nous ajoutons les routes à l'application. Cette fois, nous allons afficher, au lieu deAppAfficher les éléments comme dans l'exemple précédentRouter。Nous allons également définir des composants pour chaque route.

main.js

ReactDOM.render((
　　　<Router history={browserHistory}>
　　　　　　<Route path=""/" component={App}>
　　　　　　　　　<IndexRoute component={Home}>　/>
　　　　　　　　　<Route path="home" component={Home}>　/>
　　　　　　　　　<Route path="about" component={About}>　/>
　　　　　　　　　<Route path="contact" component={Contact}>　/>
　　　　　　</Route>
　　　</Router>
)　document.getElementById('app'))

Lorsque l'application démarre, nous verrons trois liens cliquables qui peuvent être utilisés pour changer de route.