ReactJS-Router

In diesem Kapitel lernen wir, wie man Routen für die Anwendung einrichtet.

Nummer1Schritt-React-Router installieren

eine einfache Installationsmethodereact-routeristKommandozeileFenster, führen Sie den folgenden Codeabschnitt aus.

C:\ Benutzer \ Benutzername \ Desktop \ reactApp> npm install react-router

Nummer2Schritt-Erstellen von Komponenten

In diesem Schritt werden wir vier Komponenten erstellen. DieAppKomponenten werden als Tab-Menü verwendet. Nachdem die(Startseite), (Über),(Kontakt)wird andere drei Komponenten rendern.

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>Startseite</li>
　　　　　　　　　　　　<li>Über</li>
　　　　　　　　　　　　<li>Kontakt</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;

Nummer3Schritt-Router hinzufügen

Nun fügen wir den Router zur Anwendung hinzu. Diesmal wird dargestellt, anstattAppwie im letzten Beispiel gezeigt, Elemente darstellenRouter。Wir werden auch für jede Route ein Komponente einstellen.

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'))

Wenn die Anwendung startet, sehen wir drei klickbare Links, mit denen wir die Route ändern können.