[教學] Redux 如何和 React Router 搭配使用

October 16, 2016

分類標籤：react

這篇教學會介紹如何從React元件的props拿到url資訊，以及如何使用React Router內建的的HoC withRouter 拿到url資訊。

React Router是一個管理URL的庫，能根據瀏覽器的URL決定要渲染哪些元件。

React Router有兩種基本的用法，一種是透過<Route path="XXX" />元件定義routing，比對符合的元件就會被渲染。

今天要講的另一種方法是把URL params讀出來，透過React props的方法傳進元件。

比方說，我們有個Todo List，希望可以過濾全部，未完成，已完成事項等。目標是URL為/，/active，/completed的時候分別對應三種不同的filter。我們要做的事是：把filter的值從URL比對出來，傳給底下的元件，顯示根據條件過後的todo list。

我們可以這樣做：

透過React Router讀出URL參數

我們可以在Routecomponent裡面定義path="/(:filter)"，表示將match URL中斜線後面的結果作為filter。

const Root = ({ store }) => (
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/(:filter)" component={App} />
    </Router>
  </Provider>
)

比對URL params的結果，可以在被渲染元件的props.params讀到。

把filter讀出來以後傳給VisibleTodoList元件：

const App = ({ params }) => (
	...
	<VisibleTodoList filter={params.filter} />
)

VisibleTodoList只是個container component，作用是利用react-redux的connect()API把state從redux中讀出來，傳給真正有顯示樣式的presentation component TodoList。(presentational and container component可以參照說明)

connect()的mapStateToProps(state, ownProps)參數是個callback函數，我們可以從ownProps裡讀到傳給VisibleTodoList的filter的值：

const mapStateToProps = (state, ownProps) => ({
  todos: getVisibleTodos(state.todos, ownProps.filter),
});

const VisibleTodoList = connect(mapStateToProps)(TodoList)
}

這樣就讀出了URL params，然後顯示了過濾後的todo list！

withRouter

App只負責讀出filter以後再往下傳給VisibleTodoList，但App本身用不到filter。如果元件很多層的情況下就得一層一層往下傳，很不方便。

因此React Router提供了withRouter(component)的enhancer，功用是把URL params注入到元件的props.params裡。URL params再也不用一層層往下傳，只要在需要用到的那一層元件，透過enhancer注入props即可。

// App.js
const App = ({ params }) => (
	...
	<VisibleTodoList /> // Do not pass props down
)

// VisibleTodoList.js
import { withRouter } from 'react-router'

const VisibleTodoList = withRouter(connect(
  mapStateToProps
)(TodoList));

const mapStateToProps = (state, { params }) => ({
  todos: getVisibleTodos(state.todos, params.filter || 'all'),
});