React：React Router

首先执行安装命令
npm install -S react-router
其次，引入react-router;
import {Router,Route,hashHistory} from 'react-router'
Route控制整个路由；Route控制单个路由;利用hash位置的变更，实现页面组件渲染的变更；

import React from 'react';
import ReactDom,{render} from 'react-dom';
import {Router,Route,hashHistory} from 'react-router';
import App from './App';
import About from './About';
import Contact from './Contact';
const router=(
    //Router:控制整个路由； Route:控制单个路由
    <Router history={hashHistory}>
        {/*
        // 普通路由 
        <Route path="/" component={App}/>
        <Route path="/about" component={About}/>
        <Route path="/contact" component={Contact}/>*/}
        {/* 嵌套路由 */}
        <Route path="/" component={App}>
            <Route path="about" component={About}/>
            <Route path="contact" component={Contact}/>
        </Route>
    </Router>
)
render(router,document.getElementById('app'));

渲染页面如下代码：

import React,{Component} from 'react';
import {Link} from 'react-router';
export default class App extends Component{
    render(){
    return(
            <div>
                <h1>我是APP页面</h1>
                <ul>
                    <li><Link activeStyle={{background: 'red'}} to='/'>App</Link></li>
                    <li><Link activeClassName="active" to='/about'>About</Link></li>
                    <li><Link to='/contact'>Contact</Link></li>
                </ul>
                /*嵌套路由需写： {this.props.children} */
            </div>
        )
    }
}

• 如果希望当前的路由与其他路由有不同样式，这时可以使用Link组件的activeStyle属性；
• 另一种做法是，使用activeClassName指定当前路由的Class。