在本章中，我们将学习如何为应用设置路由.

第1步 - 安装React路由器

简单安装 react-router 的方法是在命令提示符窗口中运行以下代码片段.

C:\Users\username\Desktop\reactApp>npm install react-router

步骤2  - 创建组件

在这一步中，我们将创建四个组件. App 组件将用作标签菜单.路线更改后，将呈现其他三个组件(主页)，(关于)和(联系人).

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 (         
            
            
Home
            
About
            
Contact
            
            {this.props.children}         
      )   }}export default App;class Home extends React.Component {   render() {      return (         
            
Home...
         
      )   }}export default Home;class About extends React.Component {   render() {      return (         
            
About...
         
      )   }}export default About;class Contact extends React.Component {   render() {      return (         
            
Contact...
         
      )   }}export default Contact;

步骤3  - 添加路由

现在，我们将向应用添加路由.而不是像上一个示例中那样渲染 App 元素，这次将呈现路由器.我们还将为每条路线设置组件.

main.js

ReactDOM.render((                                                      ), document.getElementById('app'))

当应用程序启动时，我们将看到三个可用于更改路径的可点击链接.