安装 React Router
可以使用 npm 来安装 React Router。本教程基于 react-router@^2.7.0 。
npm install --save react-router
连接 React Router 和 Redux 应用
首先，我们需要从 React Router 中导入 <Router /> 和 <Route />。代码如下：
import { Router, Route, browserHistory } from 'react-router';
const Root = () => (
<Router>
<Route path="/" component={App} />
</Router> );
然后，我们从 React Redux 导入 <Provider />，用 <Provider /> 包裹 <Router />
import { Provider } from 'react-redux';
const Root = ({ store }) => (
<Provider store={store}>
<Router>
<Route path="/" component={App} />
</Router>
</Provider>);
完整代码如下：
import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import { Router, Route, browserHistory } from 'react-router';
import App from './App';
const Root = ({ store }) => (
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/(:filter)" component={App} />
</Router>
</Provider>);
Root.propTypes = {
store: PropTypes.object.isRequired,
};
export default Root;
读取 URL 中的数据
在React组件中读取url数据：
没什么变化，直接按照react router原本的方式读取
在mapStateToProps 中读取url数据：
React Redux的mapStateToProps 的第二可选参数 ownProps，这是原本传递给组件的props属性对象，在ownProps中就包含了react router的数据
const mapStateToProps = (state, ownProps) => {
return {
todos: getVisibleTodos(state.todos, ownProps.match.params.filter)
};
};