實作之前

相信不少新手在一開始查 Router 的時候都會查到react-router 跟 react-router-dom這兩種，我們先來比較一下，然後我們今天要用的是 rea：

• react-router: 提供了 router 的核心 API，包含 Router, Route, Switch，但並沒有提供 dom 跳轉的API
• react-router-dom: 提供了 BrowserRouter, Route, Link 等 API，可以透過 dom事件控制路由，例如點擊一個按鈕進行跳轉。

在開始之前要說明，這裏用的 React Router V4 後的，所以版本如果在這之前，這篇文章並不適合你唷～

React Router V4 與以往有什麼不同

在 React Router V4 之前，使用者可以選擇要用 JSX 或 Plain Route 寫成 Route，前者<Router>轉成 Plain Route，然後才是由 React Router 輸出成 React Component；而在 React Router V4 引用react-router-dom的<Route>就是最後的 React Component。

這裡要注意，react-router4 以後就沒有 IndexRoute

React Router DOM

• HashRouter

屬於 Router，在 url 路中會有 #，例如 localhost:3000/# ，換 url 的時候不會發送 Request

ReactDOM.render(
    <HashRouter>
        <Route path="/" component={IndexPage}></Route>
    </HashRouter>
),document.getElementById('root'));
// 這裏頁面網址顯示為 localhost:3000/#/

• BrowserRouter

屬於 Router，在 url 不會有 #，換 url 的時候會發送 Request

ReactDOM.render(
    <BrowserRouter>
        <Route path="/pagination" component={OtherPage}></Route>
    </BrowserRouter>
),document.getElementById('root'));
// 這裏頁面網址顯示為 localhost:3000/pagination

• Route

放在 Router 裡面，由 Router 導向 Route(路由)，而要在 Route 設定相對應的頁面

<Route exact path="/" component={First}></Route>

開始實作

在開始之前要先安裝 npm install react-router-dom history --save

檔案位置 src/App.js:

// 上方與前篇檔案相同
class App extends React.Component {
  constructor(props) {
    super(props);
    this.showDetail = this.showDetail.bind(this);
  }
  // js 跳轉路由
  showDetail() {
    this.props.history.push('/detail');
  }

  render() {
    const { Increase, Decrease, Double } = this.props;
    return (
      <div className="App">
        <h2>當下數字為: {this.props.number}</h2>
        <button onClick={Increase}>增加</button>
        <button onClick={Decrease}>減少</button>
        <button onClick={Double}>雙倍</button>
        <button onClick={this.showDetail}>跳轉</button>
      </div>
    )
  }
}
// 下方與前篇檔案相同

檔案位置 src/Detail.js:

import React from 'react';
import { connect } from 'react-redux';

class Detail extends React.Component {
  render() {
    return(
      <div className="App">
        <h1>轉至不同分頁</h1>
        <h2>當下數字為: {this.props.number}</h2>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    number: state
  }
}
export default Detail = connect(mapStateToProps)(Detail);

檔案位置 src/history.js:

import createHistory from 'history/createBrowserHistory';

export default createHistory();

檔案位置 src/index.js：

// 上方與前篇檔案相同
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { Router, Route } from 'react-router-dom';
import history from './history';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route exact path="/" component={App} />
      <Route path="/detail" component={Detail} />
    </Router>
  </Provider>,
  document.getElementById('root')
)

實作效果

延續上一章節，當剛進入到頁面時，預設值為 300：

而在點擊 double 後，會計算成 600：

此時點擊跳轉，會轉至 /detail 頁面，並且因為 state 有Redux的Store管理，所以此時讀取就會是剛剛前一頁執行後的結果：

結論

• 介紹了 react-router
• 延續前一章節 react-redux，添加 react-router 功能