动漫人物
在Redux 应用中使用路由功能，可以搭配使用 React Router 来实现。 Redux 和 React Router 将分别成为数据和 URL 的事实来源（the source of truth）。 在大多数情况下， 最好将他们分开，除非需要时光旅行和回放 action 来触发 URL 改变。 1、需要从 React Router 中导入 <Router /> 和 <Route />。代码如下： import { Router, Route, browserHistory } from 'react-router'; 在 React 应用中，通常需要会用 <Router /> 包裹 <Route />。 如此，当 URL 变化的时候，<Router /> 将会匹配到指定的路由，然后渲染路由绑定的组件。 <Route /> 用来显式地把路由映射到应用的组件结构上。 用 path 指定 URL，用 component 指定路由命中 URL 后需要渲染的那个组件。 const Root = （） => （ <Router> <Route path=逗/地 component={App} /> </Router> ）； 另外，在 Redux 应用中，仍将使用 <Provider />。 <Provider /> 是由 React Redux 提供的高阶组件，用来让开发者将 Redux 绑定到 React 。 然后，开发者从 React Redux 导入 <Provider />： import { Provider } from 'react-redux'; 开发者将用 <Provider /> 包裹 <Router />，以便于路由处理器可以访问 store。 const Root = （{ store }） => （ <Provider store={store}> <Router> <Route path=逗/地 component={App} /> </Router> </Provider> ）； 2、渲染组件 现在，如果 URL 匹配到 '/‘，将会渲染 <App /> 组件。此外，开发者将在 '/' 后面增加参数 （：filter）， 当尝试从 URL 中读取参数 （：filter），需要以下代码： <Route path=逗/（：filter）地 component={App} /> 也可以将 '#' 从 URL 中移除（例如：）。 开发者需要从 React Router 导入 browserHistory 来实现： import { Router, Route, browserHistory } from 'react-router'; 然后将它传给 <Router /> 来移除 URL 中的 '#’： <Router history={browserHistory}> <Route path=逗/（：filter）地 component={App} /> </Router> 只要开发者不需要兼容古老的浏览器，比如IE9，你都可以使用 browserHistory。 components/Root.js 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;