React學習及實例開發（三）——用react-router跳轉頁面

本文基於React v16.4.1

初學react，有理解不對的地方，歡迎批評指正^_^

一、定義路由

1、安裝react-router

npm install react-router@3.0.5 --save

注：react-router 4.x版本改動較大，這里用的是3.x版本。

2、新建幾個頁面（用來跳轉，不需要什么內容），例如：

import React, { Component } from 'react';
class PageOne extends Component{
    render(){
        return(
            <h3>page 1</h3>      
        )
    }
}
export default PageOne;

3、新建一個router.js文件，將上面新建的頁面加入路由。

• • 這里是要通過側邊欄改變Content部分的內容，App是包含有側邊欄的頁面，所以其他page要嵌套在App里面。
  • IndexRoute可以定義默認路由

import React, { Component } from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import App from './App';
import PageOne from './pages/PageOne';
import PageTwo from './pages/PageTwo';
import PageThree from './pages/PageThree';
class Routers extends Component {
    render(){
        return(
            <Router history={ browserHistory }>
                <Route path="/" component={App}>
                    <IndexRoute component={PageOne} />
                    <Route path="page1" component={PageOne} />
                    <Route path="page2" component={PageTwo} />
                    <Route path="page3" component={PageThree} />    
                </Route>
            </Router> 
        )
    }   
}
export default Routers;

4、在入口文件index.js中引入路由

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Routers from './router';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Routers />, document.getElementById('root'));
registerServiceWorker();

二、路由跳轉

1、為側邊欄添加路由鏈接，例如：

<Menu.Item key="1">
   <Link to="/page1"><Icon type="pie-chart" /><span>Option 1</span></Link>
</Menu.Item>

　　2、在Content中加入 this.props.children ，路由會指出相應的children

<Content>
     {this.props.children}
</Content>

　　效果如圖：

END-------------------------------------