# Redux: Usage with React-Router
首先,我们需要从 React Router 中导入 <Router />
和 <Route />
。代码如下:
1 | import { Router, Route, browserHistory } from 'react-router'; |
在 React 应用中,通常你会用 <Router />
包裹 <Route />
。 如此,当 URL 变化的时候,<Router />
将会匹配到指定的路由,然后渲染路由绑定的组件。 <Route />
用来显式地把路由映射到应用的组件结构上。 用 path
指定 URL,用 component
指定路由命中 URL 后需要渲染的那个组件。
1 | const Root = () => ( |
然后,我们从 React Redux 导入 <Provider />
:
1 | import { Provider } from 'react-redux'; |
我们将用 <Provider />
包裹 <Router />
,以便于路由处理器可以访问 store
(暂时未找到相关中文翻译,译者注)。
**
Provider
实际上仅仅做了一个核心操作,就是将 store 设置到 context 里面import { Provider } from ‘react-redux’;
,这样它里面包裹的所有 childElem
都可以访问 store
**
1 |
|
## 通过 React Router 导航(重载 React Router 里面的 Link)
React Router 提供了 <Link />
来实现导航功能。 下面将举例演示。现在,修改我们的容器组件 <FilterLink />
,这样我们就可以使用 <FilterLink />
来改变 URL。你可以通过 activeStyle
属性来指定激活状态的样式。
### containers/FilterLink.js
1 | import React from 'react'; |
### components/Footer.js
1 | import React from 'react' |
这时,如果你点击 <FilterLink />
,你将看到你的 URL 在 '/complete'
,'/active'
,'/'
间切换。 甚至还支持浏览的回退功能,可以从历史记录中找到之前的 URL 并回退。
## 从 URL 中读取数据(将 component 和 URL 连接起来)
但是上面的修改还不够, URL 变化不会影响 component 细节, 因为到这一步为止我们还没有将 component 和 URL 连接起来
现在,即使 URL 改变,todo 列表也不会被过滤。 这是因为我们是在 <VisibleTodoList />
的 mapStateToProps()
函数中过滤的。 这个目前仍然是和 state
绑定,而不是和 URL 绑定。mapStateToProps
的第二可选参数 ownProps
,这个是一个传递给 <VisibleTodoList />
所有属性的对象。
所以修改一下 mapStateToProps
1 | // 注意这里多传了一个ownProps参数 |
然后因为上文我们已经提供了 <Route path="/(:filter)" component={App} />
,因此我们可以在 App
中获取 params
的属性。
params
是一个包含 url 中所有指定参数的对象。 _例如:如果我们访问localhost:3000/completed
,那么params
将等价于{ filter: 'completed' }
。 现在,我们可以在<App />
中读取 URL 参数了。
下一步就是在 App
里面添加一个 prop: filter
给上方的 ownProps.filter
使用。
1 | const App = ({ params }) => { |