爲何你應該嘗試@reach/router

最近react-router的一個做者另外寫了一個類react-router的組件@reach/router，嘗試後感受太棒了。若是你的項目只是web端的話我認爲能夠把你的react-router換掉了。

下面是我到目前看到的全部很是好的點。

1. 小，就4kb,壓縮後比react-router小40kb左右。

2. 更少的配置

   a. react-router須要3個包(history, react-router-dom, react-router-redux)，reach-router只須要一個。

   b. 不須要在store配置router相關信息

   c. 不須要顯示的使用history

   // in store config file
   //react-router
   import { routerMiddleware } from 'react-router-redux';
   import createHistory from 'history/createBrowserHistory';
   const history = createHistory();
   const middleware = routerMiddleware(history);
   export { history };
   
   //reach/router, nothing
   
   複製代碼

3. 更好用

   a. 當你想跳轉頁面時

   // react-router
   import { push } from 'react-router-redux';
   import { PropTypes } from 'prop-types';
   // use it
   this.context.store.dispatch(push('/see-you'));
   
   FooComponent.contextTypes = {
     store: PropTypes.object,
   };
   複製代碼

   // reach/router
   import { navigate } from "@reach/router";
   navigate(`/lol`);
   複製代碼

   b.當你想取url裏面的參數時

   // react-router
   import { withRouter } from 'react-router-dom';
   import { PropTypes } from 'prop-types';
   
   //use it
   const { match: { params: { iAmHere } } } = this.props;
   FooComponent.propTypes = {
       match: PropTypes.object,
   };
   export default withRouter(FooComponent);
   複製代碼

   // reach/router
   const { iAmHere } = this.props;
   複製代碼

4. 基本同樣的api,學習成本很是低

5. 源碼很是簡潔，總共就3個文件，900行，若是你想深刻理解單頁應用的路由是怎麼實現的，reach-router,絕對是絕佳的下手資料。

不說了，去看看吧 github.com/reach/route…