采用reactjs 開發時，redux 和 react-route 是怎麽配合使用的

在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;

上一篇:怎麽在asp網頁上加壹個在線視頻播放功能！已經有了播放器源碼

下一篇:spring數據源配置的問題？（加急！！！）