初试ReactRouterv4 要注意什么，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联公司2013年成立，公司以
做网站、成都网站制作、系统开发、网络推广、文化传媒、企业宣传、
平面广告设计等为主要业务，适用行业近百种。服务企业客户数千家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。
距离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方面也精简了不少，对新手来说降低了学习难度，但如果是对之前项目的重构，嗯，简直无**可说。本次升级的主要特点如下：
声明式（Declarative）
可组合 （Composability）
React Router V4 遵循了 React 的理念： 万物皆组件 。因此 升级之后的 Route、Link、Switch等都是一个普通的组件。
React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括：
react-router React Router 核心
react-router-dom 用于 DOM 绑定的 React Router
react-router-native 用于 React Native 的 React Router
react-router-redux React Router 和 Redux 的集成
react-router-config 静态路由配置帮助助手
插件初引入
通常我们在 React 的使用中，一般要引入两个包， react 和 react-dom ，那么 react-router 和 react-router-dom 是不是两个都要引用呢？ 注意，前方高能，入门第一坑就在这里 。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就OK了。当然，如果搭配 redux ，你还需要使用 react-router-redux 。
主要组件简介
在4.0之前版本的 API 中， 、、 等。而在 React Router 4 中，你可以将各种组件及标签放进
// 示例1
Router是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口，而是使用高级的路由：
TIPS：算是第二坑吧，和之前的Router不一样，这里
反面典型在这里：
没错，示例2在没有 爸爸的保护下，会报如下异常信息：
我们知道，Route组件主要的作用就是当一个location匹配路由的path时，渲染某些UI。示例如下：
// 如果应用的地址是/,那么相应的UI会类似这个样子：
// 如果应用的地址是/news,那么相应的UI就会成为这个样子：
path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；
strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；
再次奉上两个鲜活的例子：
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 | 是 |
同时，新版的路由为
第一种方式没啥可说的，和之前一样，这里我们重点看下
// 行内渲染示例
Home
}/>
// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
(
)}/>
)
TIPS: 第三坑！
和之前版本没太大区别，重点看下组件属性：
to（string/object）：要跳转的路径或地址；
replace（bool）： 为 true 时 ，点击链接后将使用新地址替换掉访问历史记录里面的原地址； 为 false 时 ，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false ；
示例如下：
// Link组件示例
// to为string
关于
// to为obj
// replace
activeClassName（string）：设置选中样式，默认值为 active；
activeStyle（object）：当元素被选中时, 为此元素添加样式；
exact（bool）：为 true 时, 只有当地址完全匹配 class 和 style 才会应用；
strict（bool）：为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线； isActive（func）：判断链接是否激活的额外逻辑的功能；
从这里我们也可以看出，新版本的路由在组件化上面确实下了不少功夫，来看看NavLink的使用示例：
// activeClassName选中时样式为selected
FAQs
// 选中时样式为activeStyle的样式设置
FAQs
// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
Event 123
该组件用来渲染匹配地址的第一个
如果现在的URL是 /about ，那么 /about ，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：
现在，如果我们处于 /about ， /michael ，
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联成都网站设计公司行业资讯频道，感谢您对创新互联成都网站设计公司的支持。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻标题：初试ReactRouterv4要注意什么-创新互联
本文网址：
http://cdkjz.cn/article/gcpgg.html
