为什么你应该尝试@reach/router

最近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相关推荐

使用Aura.Router在PHP中进行Web路由
Everyone is interested in SEO-friendly, REST-style URLs. Apache can do URL routing via mod_rewrite r ...
在React中使用React Router v6
具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页.这可以通过使用诸如React Router之类的路由库来处理. 在本教程中,让我们看看如何使 ...
每周分享第 10 期
这里记录过去一周,我看到的值得分享的东西,每周五发布. (题图:卢日尼基体育场,莫斯科,2014.世界杯开幕式的转播,让我意识到自己去过那个体育场.那天想去莫斯科大学玩,路过一个体育场,大门紧锁,空无 ...
这可能是你们都在找的：React 纯原生纯hook多标签微前端
项目地址:https://github.com/X-neuron/antdFront.git 项目特点: 1.采用webpack.babel.antd 等较为原生的配置和函数组件搭建,支持pw ...
vue路由添加.html,怎么使用VueRouter的addRoutes方法实现动态添加用户的权限路由
怎么使用VueRouter的addRoutes方法实现动态添加用户的权限路由发布时间:2021-04-26 13:34:44 来源:亿速云阅读:76 作者:小新小编给大家分享一下怎么使用VueR ...
2020年最新前端框架大全，Web工程师人手一份！
今天跟大家分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助. 一.构建工具 1. Parcel 地址:https://parceljs.org Parcel是一款极速零配置WEB应用打 ...
50个好用的前端框架，千万收好以留备用!
来源 | https://www.jianshu.com/p/182b69e54fe8 今天跟你分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助. 一.构建工具 1. Parcel 地 ...
前端热门工具简直不要太好用了！
★★★★★ Web前端开发神器:点击查看→→ WebStorm安装与使用今日送书!包邮!10本!(初来乍到,多多指教) <Bootstrap实战> <图解CSS3核心技术与案例实 ...
2020年最新前端框架大全，Web工程师人手一份
今天跟大家分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助. 一.构建工具 1. Parcel 地址:https://parceljs.org Parcel是一款极速零配置WEB应用打 ...

为什么你应该尝试@reach/router

为什么你应该尝试@reach/router相关推荐

最新文章

热门文章