為什麼你應該嘗試@reach/router

一介文夫發表於2019-03-04

最近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…

相關文章