react-router3使用总结

第一步: 安装模块

npm install --save react-router@3.0.0
npm install --save react-router-redux//用于配合redux,在个页面之间传递state

第二步: 创建路由嵌套父组件

//App组件
render() { 
    return(
        <div>{this.props.children}</div>
    )
}

第三步: 创建路由入口文件

import { Router, Route, IndexRoute, hashHistory, IndexRedirect } from 'react-router';

render() {
    return (
        <Router history={hashHistory}>
            <Route path='/' component={App}>
                  <IndexRoute component={a}/>//此嵌套内path '/' 默认显示的组件
                  <Route path='b' component={b}/>
            </Route>
        </Router>
    )
}

react-router-redux的使用:
第一步:引入 routerReducer

import { routerReducer } from 'react-router-reducer'

第二步: 在reducer的入口文件中, 使用combineReducer 方法,

import { combineReducers } from 'redux';

var reducer = combineReducers(
    routing: routerReducer
)

第三步: 设置路由绑定store,引入syncHistoryWithStore

import { syncHistoryWithStore } from 'react-router-redux';
var history = syncHistoryWithStore(hashHistory, store);
ReactDOM.render(
    <Provider store={store}>
        <RouterMap history={history}/>
    </Provider>,
    document.getElementById('root')
);

这样设置store中的数据就可以在路由间传递