React教程16：React Router

这一章教程将向你讲解如何设置React Router，

第1步 – 安装 React Router

在命令行中通过npm安装 react-router 。

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

第2步 –  创建Components

这一步，我们创建4个components。  App component 会用在tab菜单上。其他3个components (Home), (About) 和 (Contact) 在route改变时候对应地render在页面上。

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;

第3步 – 添加Router

这一步我们添加router。让 Router 能够被render出来。每一个components 对应不同的 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'))

app启动时候，我们可以看到3个链接，点击后显示相应route页面。