ReactJS - 路由(Router) - 学习 React - 简单教程，简单编程

解决复杂的URL和层级组件之间的映射关系式React Router 的核心

本章节中我们将学习如何使用 React 的 Router 路由组件

React Router 安装

React Router 的安装命令

$ npm install react-router

Step 2 - 定义页面组件

Router 组件 本身只是一个容器，真正的路由要通过Route组件 定义

接下来我们会创建四个组件 - App 组件展示一个 tab 目录，总共有三个 tab : 首页，关于，联系我们 - Home 组件显示首页 - About 组件显示关于我们页面 - Contact 组件显示联系我们页面

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;

添加路由

页面组件已经写好了，现在给我们的应用添加路由。这里添加的方式和前几章不一样，因为我们使用了 Router

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

运行我们的 App,你会看到如下效果单击每个 tab 试一试吧。 React Router Example