为何你应该尝试@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…