距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”...
江湖传言,目前官方同时维护 2.x 和 4.x 两个版本。(ヾ(。ꏿ﹏ꏿ)ノ゙咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的 warning 移除掉而已。按照规划,没有历史包袱的新项目想要使用稳定版的 ReactRouter 时,应该使用 ReactRouter 3.x。目前 3.x 版本也还处于 beta 阶段,不过会先于 4.x 版本正式发布。如果你已经在使用 2.x 的版本,那么升级 3.x 将不会有任何额外的代码变动。
礼貌性简介下
React Router V4 相较于前面三个版本有根本性变化,首先是遵循 Just Component 的 API 设计理念,其次API方面也精简了不少,对新手来说降低了学习难度,但如果是对之前项目的重构,嗯,简直无**可说。本次升级的主要特点如下:
React Router V4 遵循了 React 的理念: 万物皆组件 。因此 升级之后的 Route、Link、Switch等都是一个普通的组件。
React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括:
插件初引入
通常我们在 React 的使用中,一般要引入两个包, react 和 react-dom ,那么 react-router 和 react-router-dom 是不是两个都要引用呢? 注意,前方高能,入门第一坑就在这里 。他们两个只要引用一个就行了,不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就OK了。当然,如果搭配 redux ,你还需要使用 react-router-redux 。
主要组件简介
在4.0之前版本的 API 中, <Router> 组件的 children 只能是 React Router 提供的各种组件,如 <Route>、<IndexRoute>、<Redirect> 等。而在 React Router 4 中,你可以将各种组件及标签放进 <Router> 组件中,他的角色也更像是 Redux 中的 <Provider> 。**不同的是 <Provider> 是用来保持与 store 的更新,而 <Router> 是用来保持与 location 的同步。**示例如下:
// 示例1 <Router> <div> <ul> <li><Link to="/">首页</Link></li> <li><Link to="/about">关于</Link></li> <li><Link to="/topics">主题列表</Link></li> </ul> <hr/> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </div> </Router>
Router是所有路由组件共用的底层接口,一般我们的应用并不会使用这个接口,而是使用高级的路由:
TIPS:算是第二坑吧,和之前的Router不一样,这里 <Router> 组件下只允许存在一个子元素,如存在多个则会报错。
反面典型在这里:
<Router> <ul> <li><Link to="/">首页</Link></li> <li><Link to="/about">关于</Link></li> <li><Link to="/topics">主题列表</Link></li> </ul> <hr/> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </Router>
没错,示例2在没有 <div> 爸爸的保护下,会报如下异常信息:
我们知道,Route组件主要的作用就是当一个location匹配路由的path时,渲染某些UI。示例如下:
<Router> <div> <Route exact path="/" component={Home}/> <Route path="/news" component={NewsFeed}/> </div> </Router> // 如果应用的地址是/,那么相应的UI会类似这个样子: <div> <Home/> </div> // 如果应用的地址是/news,那么相应的UI就会成为这个样子: <div> <NewsFeed/> </div>
<Route> 组件有如下属性:
再次奉上两个鲜活的例子:
exact配置:
路径 | location.pathname | exact | 是否匹配 |
---|---|---|---|
/one | /one/two | true | 否 |
/one | /one/two | false | 是 |
strict配置:
路径 | location.pathname | strict | 是否匹配 |
---|---|---|---|
/one/ | /one | true | 否 |
/one/ | /one/ | true | 是 |
/one/ | /one/two | true | 是 |
同时,新版的路由为 <Route> 提供了三种渲染内容的方法:
第一种方式没啥可说的,和之前一样,这里我们重点看下 <Route render> 的渲染方式:
// 行内渲染示例 <Route path="/home" render={() => <div>Home</div>}/> // 包装/合成 const FadingRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( <FadeIn> <Component {...props}/> </FadeIn> )}/> ) <FadingRoute path="/cool" component={Something}/>
TIPS: 第三坑! <Route component> 的优先级要比 <Route render> 高,所以不要在同一个 <Route> 中同时使用这两个属性。
和之前版本没太大区别,重点看下组件属性:
示例如下:
// Link组件示例 // to为string <Link to="/about">关于</Link> // to为obj <Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/> // replace <Link to="/courses" replace />
<NavLink> 是 <Link> 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数,组件属性:
从这里我们也可以看出,新版本的路由在组件化上面确实下了不少功夫,来看看NavLink的使用示例:
// activeClassName选中时样式为selected <NavLink to="/faq" activeClassName="selected" >FAQs</NavLink> // 选中时样式为activeStyle的样式设置 <NavLink to="/faq" activeStyle={{ fontWeight: 'bold', color: 'red' }} >FAQs</NavLink> // 当event id为奇数的时候,激活链接 const oddEvent = (match, location) => { if (!match) { return false } const eventID = parseInt(match.params.eventID) return !isNaN(eventID) && eventID % 2 === 1 } <NavLink to="/events/123" isActive={oddEvent} >Event 123</NavLink>
该组件用来渲染匹配地址的第一个 <Route> 或者 <Redirect> 。那么它与使用一堆route又有什么区别呢?
<Switch> 的独特之处是独它仅仅渲染一个路由。相反地,每一个包含匹配地址(location)的 <Route> 都会被渲染。思考下面的代码:
<Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/>
如果现在的URL是 /about ,那么 <About> , <User> , 还有 <NoMatch> 都会被渲染,因为它们都与路径(path)匹配。这种设计,允许我们以多种方式将多个 <Route> 组合到我们的应用程序中,例如侧栏(sidebars),面包屑(breadcrumbs),bootstrap tabs等等。 然而,偶尔我们只想选择一个 <Route> 来渲染。如果我们现在处于 /about ,我们也不希望匹配 /:user (或者显示我们的 “404” 页面 )。以下是使用 Switch 的方法来实现:
<Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>
现在,如果我们处于 /about , <Switch> 将开始寻找匹配的 <Route> 。 <Route path="/about"/> 将被匹配, <Switch> 将停止寻找匹配并渲染 <About> 。同样,如果我们处于 /michael , <User> 将被渲染。
以上就是我对React Router v4 的初试,反正也是一边查文档,一边试水的,如有错误或疏漏,还请大家谅解并不吝指正!也希望大家多多支持小牛知识库。
JavaScript-StepPitGuide《JavaScript踩坑指南》,那些说前端简单的什么的最变态了,可以说 JavaScript 是世界上最复杂的语言。
本文向大家介绍.Net Core 2.2升级3.1的避坑指南(小结),包括了.Net Core 2.2升级3.1的避坑指南(小结)的使用技巧和注意事项,需要的朋友参考一下 写在前面 微软在更新.Net Core版本的时候,动作往往很大,使得每次更新版本的时候都得小心翼翼,坑实在是太多。往往是悄咪咪的移除了某项功能或者组件,或者不在支持XX方法,这就很花时间去找回需要的东西了,下面是个人在迁移.
本文向大家介绍浅谈Vue3.0新版API之composition-api入坑指南,包括了浅谈Vue3.0新版API之composition-api入坑指南的使用技巧和注意事项,需要的朋友参考一下 关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 compositio
本文向大家介绍Python编码爬坑指南(必看),包括了Python编码爬坑指南(必看)的使用技巧和注意事项,需要的朋友参考一下 自己最近有在学习python,这实在是一门非常短小精悍的语言,很喜欢这种语言精悍背后又有强大函数库支撑的语言。可是刚接触不久就遇到了让人头疼的关于编码的问题,在网上查了很多资料现在在这里做一番总结,权当一个记录也为后来的兄弟姐妹们服务,如果可以让您少走一些弯路本人将倍感荣
本文向大家介绍Linux下安装Python3.6及避坑指南,包括了Linux下安装Python3.6及避坑指南的使用技巧和注意事项,需要的朋友参考一下 Python3的安装 1.安装依赖环境 Python3在安装的过程中可能会用到各种依赖库,所以在正式安装Python3之前,需要将这些依赖库先行安装好。 2. 下载Python3源代码 下载Python3的源代码有两种方式,一种是在它的官网下载,网
MathJax允许你在你的网页中包含公式,无论是使用LaTeX、MathML或者AsciiMath符号,这些公式都会被javascript处理为HTML、SVG或者MathML符号。 这里有三种方法获取MathJax:最简单的方法就是使用分布式网络服务中的MathJax的副本,它位于 cdn.mathjax.org ,但是你也可以下载并安装一个MathJax的副本到你的服务器,或者使用在你本地硬盘