最近react-router的一個作者另外寫了一個類react-router的組件

@reach/router，嘗試后感覺太棒了。如果你的項目只是web端的話我認為可以把你的react-router換掉了。

下面是我到目前看到的所有非常好的點。

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

更少的配置

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

更好用

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;

基本一樣的api,學習成本非常低

源碼非常簡潔，總共就3個文件，900行，如果你想深入理解單頁應用的路由是怎么實現的，reach-router,絕對是絕佳的下手資料。

不說了，去看看吧 https://github.com/reach/router

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的为什么你应该尝试@reach/router的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。