1 回答

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
在Redux 應(yīng)用中使用路由功能,可以搭配使用 React Router 來實(shí)現(xiàn)。 Redux 和 React Router 將分別成為數(shù)據(jù)和 URL 的事實(shí)來源(the source of truth)。 在大多數(shù)情況下, 最好將他們分開,除非需要時(shí)光旅行和回放 action 來觸發(fā) URL 改變。
1、需要從 React Router 中導(dǎo)入 <Router /> 和 <Route />。代碼如下:
import { Router, Route, browserHistory } from 'react-router';
在 React 應(yīng)用中,通常需要會(huì)用 <Router /> 包裹 <Route />。 如此,當(dāng) URL 變化的時(shí)候,<Router /> 將會(huì)匹配到指定的路由,然后渲染路由綁定的組件。 <Route /> 用來顯式地把路由映射到應(yīng)用的組件結(jié)構(gòu)上。 用 path 指定 URL,用 component 指定路由命中 URL 后需要渲染的那個(gè)組件。
const Root = () => (
<Router>
<Route path=逗/地 component={App} />
</Router>
?。?br/> 另外,在 Redux 應(yīng)用中,仍將使用 <Provider />。 <Provider /> 是由 React Redux 提供的高階組件,用來讓開發(fā)者將 Redux 綁定到 React 。
然后,開發(fā)者從 React Redux 導(dǎo)入 <Provider />:
import { Provider } from 'react-redux';
開發(fā)者將用 <Provider /> 包裹 <Router />,以便于路由處理器可以訪問 store。
const Root = ({ store }) => (
<Provider store={store}>
<Router>
<Route path=逗/地 component={App} />
</Router>
</Provider>
?。?;
2、渲染組件
現(xiàn)在,如果 URL 匹配到 '/‘,將會(huì)渲染 <App /> 組件。此外,開發(fā)者將在 '/' 后面增加參數(shù) (:filter), 當(dāng)嘗試從 URL 中讀取參數(shù) (:filter),需要以下代碼:
<Route path=逗/(:filter)地 component={App} />
也可以將 '#' 從 URL 中移除(例如:)。 開發(fā)者需要從 React Router 導(dǎo)入 browserHistory 來實(shí)現(xiàn):
import { Router, Route, browserHistory } from 'react-router';
然后將它傳給 <Router /> 來移除 URL 中的 '#’:
<Router history={browserHistory}>
<Route path=逗/(:filter)地 component={App} />
</Router>
只要開發(fā)者不需要兼容古老的瀏覽器,比如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>
?。?br/> Root.propTypes = {
store: PropTypes.object.isRequired,
};
export default Root;
- 1 回答
- 0 關(guān)注
- 997 瀏覽
添加回答
舉報(bào)