tags:開發隨筆

Rock-Climbing

概述

和 Angular 那改朝換代般的升級相比，react技術棧一直以其穩定的 API 而備受好評。不過，這次 react-router 從v3到v4的升級，簡直是砸 react 的好名聲的。

如果你以為這個升級只是在 package.json 中簡單的改一下版本號就好了，那你就大錯特錯了。我相信，你改完版本號之后，會像我當初一樣面對成堆的問題而驚奇不已。

事實上，不少開發者對v4的的變化感到驚詫，比如下面的這位就抱怨v3 升v4花了10天。

總之，v3到v4不是一件幾分鐘就可以搞定的事。一個中型的項目，花2-3天在升級上很正常。
重要的事情說三遍：升級之前先備份！升級之前先備份！！升級之前先備份！！！
備份完之后，就和我一起來踩坑吧！

坑一: 包的選擇

react router v4 是對v3的重寫。現在分為三個包：

• react-router：只提供核心的路由和函數。一般的應用不會直接使用；
• react-router-dom：供瀏覽器/Web應用使用的API。依賴于react-router， 同時將react-router的API重新暴露(export)出來；
• react-router-native:供 React Native 應用使用的API。同時將react-router的API重新暴露(export)出來；

對于一般的web應用，直接引入第二個包即可，安裝之前先刪除老版本react-router:

npm uninstall react-router --save
npm install --save react-router-dom

或者你像我一樣，更親睞yarn的話:

yarn remove react-router
yarn add react-router-dom

引入完之后，要做的第一件事就是將所有原先引入react-router的地方都換成react-router-dom。

// 原先
import { Route, Redirect } from 'react-router';
// 現在
import { Route, Redirect } from 'react-router-dom';

坑二：不再用<Router>，要用具體的實現

在V3中，一般使用<Router>，只是在其history屬性中指定是哪種實現: hashHistory或者browserHistory之類的。

// v3
import { Router, hashHistory } from 'react-router';
const MyApp = () => (
    <Router history={hashHistory}>
        ...
    </Router>
);

而在v4中，你需要直接用具體的實現，比如HashRouter或者BrowserRouter：

// v4
import { HashRouter } from 'react-router-dom';
const MyApp = () => (
    <HashRouter>
        ...
    </HashRouter>
);

坑三: 對于redux應用，你需要用react-router-redux

如果你像我一樣，也用了redux的話，那么恭喜你，你還得用react-router-redux。
而且，這個包的正式版4.x不支持react-router v4。你需要用 alpha 版 的react-router-redux。在package.json 里加入react-router-redux~5.0.0或者用yarn:

yarn add react-router-redux@5.0.0

雖然我用的是alpha 6，貌似也沒啥毛病。

而且，對于redux應用，你不可以用BrowserRouter，或者HashRouter，而應該使用ConnectedRouter。
比如，我的代碼:

import { Route } from 'react-router-dom';
import history from 'history/createBrowserHistory';
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
import App from './components/App';
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history()}>
      <Route path="/" component={App} />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

坑四：嵌套 Route和Index Route 全失效啦

在V3中，嵌套Route和Index Route的使用是很常見的。比如marknoteapp.com中，博客部分的路由定義如下：

<Route path="/blog/:bloggerId" component={BlogLayout}>
              <IndexRoute component={BlogList}/>
              <Route path="/blog/:bloggerId/settings" component={BlogConfig}/>
              <Route path="/blog/:bloggerId/about" component={BlogAbout}/>
              <Route path="/blog/:bloggerId/dashboard" component={BlogDashboard}/>
              <Route path="/blog/:bloggerId/:postId" component={BlogPost}/>
  </Route> 

這樣/blog/123 會觸發BlogLayout，和BlogList，而/blog/123/456則會觸發BlogLayout和BlogPos。很方便。
在 v4 中 IndexRoute沒了，然后不允許Route嵌套。
要實現類似的功能，需要兩步：

• 在父組件中將路由給"/blog/:blggerId"給"BlogLayout"，代碼如下：

<Switch>
           <Route path="/blog/:bloggerId" component={BlogLayout} />
</Switch>

• 然后在BlogLayout中定義Blog這部分的路由:

<div className='content' id="blog-content">
                <Switch>
                      <Route exact path="/blog/:bloggerId/settings" component={BlogConfig} />
                      <Route exact path="/blog/:bloggerId/about" component={BlogAbout} />
                      <Route exact path="/blog/:bloggerId/dashboard" component={BlogDashboard} />
                      <Route exact path="/blog/:bloggerId/:postId" component={BlogPost} />
                      <Route exact path="/blog/:bloggerId" component={BlogList} />
                </Switch>
 </div>

這里有幾點需要注意：

• 在 v3 中，Router 的定義一般是全局的，所有的路由都在一個文件中定義；而在 v4 中Router可以出現在任何組件中。
• 在 v4 中，Router 在UI組件中加載對應的子 UI 組件。比如，我的上面的代碼中，路由會根據URL 匹配來在BlogConfig/BlogAbout/BlogDashboard/BlogPost/BlogList選擇一個，加載進來，并顯示在id為 blog-content 的 div 中。
• Switch 用來從多個Route中選出一個。否則會觸發多個組件。
• exact 這個屬性來表示精確匹配，否則，URL /blog/123/456 也可以觸發BlogList。
• 由于v4中沒有了IndexRoute，將BlogList 的 path聲明得和它的父組件一樣就可以了。
• 在v4中，path屬性永遠是絕對路徑。如果你不想重復當前級別的路徑，可以使用match這個屬性。

比如在我的代碼中， 在BlogLayout中，我可以 match.url 來代替"/blog/:bloggerId “，代碼如下:

<div className='content' id="blog-content">
                <Switch>
                      <Route exact path={"${match.url}/settings"}} component={BlogConfig} />
                      <Route exact path={"${match.url}/about"} component={BlogAbout} />
                      <Route exact path={"${match.url}/dashboard"} component={BlogDashboard} />
                      <Route exact path={"${match.url}/:postId"} component={BlogPost} />
                      <Route exact path={"${match.url}}component={BlogList} />
                </Switch>
 </div>

坑五：不再可以從params中取URL參數了

在 v3 中，你可以從params這個屬性中取到URL 中傳遞過來的參數。比如我在 BlogLayout中獲取bloggerID，v3的代碼如下：

//v3
const bloggerId = this.props.params.bloggerId;

這個屬性在v4中不再被自動注入了，需要從match屬性中獲取。代碼如下:

//v4
const bloggerId = this.props.match.params.bloggerId;

這里還有一個小小的差異。在v3中，參數會自動解碼，而在v4中不會。所以如果你的URL參數中有特殊字符的話，你可能需要自己調decodeURI之類的方法解碼。

坑六：Route的onEnter, onUpdate和onLeave之類的事件沒有了

在v3中，我可以使用使用 Route的 onEnter, onUpdate和 onLeave事件來做一些事情。
比如，我可以在onUpdate中觸發google analytics來跟蹤用戶行為：

//v3
<Router history={browserHistory} onUpdate={doLogPageView} >

這里doLogPageView實現如下：

function doLogPageView(){
  const sUrl = window.location.pathname + window.location.search;
  
  ReactGA.set({ page: sUrl });
  ReactGA.pageview(sUrl);
}

在v4中，Route的事件沒了。我查了很多資料，貌似有兩種解決辦法：

• 將代碼移到每個組件的componentWillMount 方法中去。這意味著每個組件都要做這樣的事情，代碼冗余；
• 使用withRouter 這個HOC (高階組件)；
  我用的后一種方法，代碼如下：

import { withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';
class App extends Component {

  componentWillMount() {
    this.setState(
      {
        height: window.innerHeight,
        sidebarOpen: false,
        docked: true,
      }
    );
    this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);

    this.props.history.listen((location, action) => {
      const url = location.pathname + location.search + location.hash;
      ReactGA.set({ page: url });
      ReactGA.pageview(url);
      console.log(`current URL:${url}`);
      
    });
  }
}
export default withRouter(App);

總結

簡單的說，react-router v4 簡直不像是v3的升級，而更像一次天馬行空的重寫。其理念是完全不一樣的。v3 更像是AOP (面向切面編程)的樣子：路由全局配置，可以通過 事件進行一些共通的處理；v4 用react-router 團隊的話說是 real component，可以嵌入任何組件中。

據說 facebook 的react 團隊對 v3之前的react-router 一直沒有好感，而v4之后則頗多溢美之詞。

但是客觀的講，從v3升級到 v4遇到的問題還是比較多的。尤其是官方居然沒有一個全面的指南。雖然在 這里 有一個文檔，但是很多實際升級時會遇到的問題都沒有涉及。

你的項目用的v3 還是 v4？需要升級嗎？升級遇到什么問題，可以在下面留言，一起探討。

參考

• React router v4簡介，需要帶梯子:: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
• 官方寫了一篇升級指南，但是其深度和廣度，簡直難以讓人相信這幫人自己做過升級： https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md
• Medium上的一篇好文，需要帶梯子: https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a
• stack overflow 上一篇討論history監控的帖子: https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4