当前位置:首页 > Javascript技术文章 > React Router v4 入坑指南(小结)

有关React Router v4 使用指南

  • 发布时间:
  • 作者:码农之家原创
  • 点击:146

这篇文章主要知识点是关于React、Router、v4、React Router V4使用指南(精讲) 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下java相关资源

JavaScript之美

阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

查看详情

React Router v4 入坑指南(小结)

距离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 入坑指南(小结)

React Router V4 相较于前面三个版本有根本性变化,首先是遵循 Just Component 的 API 设计理念,其次API方面也精简了不少,对新手来说降低了学习难度,但如果是对之前项目的重构,嗯,简直无**可说。本次升级的主要特点如下:

  • 声明式(Declarative)
  • 可组合 (Composability)

React Router V4 遵循了 React 的理念: 万物皆组件 。因此 升级之后的 Route、Link、Switch等都是一个普通的组件。

React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括:

  1. react-router React Router 核心
  2. react-router-dom 用于 DOM 绑定的 React Router
  3. react-router-native 用于 React Native 的 React Router
  4. react-router-redux React Router 和 Redux 的集成
  5. react-router-config 静态路由配置帮助助手

插件初引入

通常我们在 React 的使用中,一般要引入两个包, react 和  react-dom ,那么 react-routerreact-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是所有路由组件共用的底层接口,一般我们的应用并不会使用这个接口,而是使用高级的路由:

  1. <BrowserRouter> :使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步;
  2. <HashRouter> :使用 URL 的 hash (例如:window.location.hash) 来保持 UI 和 URL 的同步;
  3. <MemoryRouter> :能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写);
  4. <NativeRouter> :为使用React Native提供路由支持;
  5. <StaticRouter> :从不会改变地址;

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> 爸爸的保护下,会报如下异常信息:

 

 
React Router v4 入坑指南(小结)

 

我们知道,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> 组件有如下属性:

  1. path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
  2. exact(bool):为true时,则要求路径与location.pathname必须完全匹配;
  3. 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

 

同时,新版的路由为 <Route> 提供了三种渲染内容的方法:

  1. <Route component> :在地址匹配的时候React的组件才会被渲染,route props也会随着一起被渲染;
  2. <Route render> :这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便;
  3. <Route children> :与render属性的工作方式基本一样,除了它是不管地址匹配与否都会被调用;

第一种方式没啥可说的,和之前一样,这里我们重点看下 <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> 中同时使用这两个属性。

和之前版本没太大区别,重点看下组件属性:

  1. to(string/object):要跳转的路径或地址;
  2. replace(bool): 为 true 时 ,点击链接后将使用新地址替换掉访问历史记录里面的原地址; 为 false 时 ,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false

示例如下:

// 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 的时候会给已经渲染的元素添加样式参数,组件属性:

  1. activeClassName(string):设置选中样式,默认值为 active;
  2. activeStyle(object):当元素被选中时, 为此元素添加样式;
  3. exact(bool):为 true 时, 只有当地址完全匹配 class 和 style 才会应用;
  4. strict(bool):为 true 时,在确定位置是否与当前 URL 匹配时,将考虑位置 pathname 后的斜线; isActive(func):判断链接是否激活的额外逻辑的功能;

从这里我们也可以看出,新版本的路由在组件化上面确实下了不少功夫,来看看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 的初试,反正也是一边查文档,一边试水的,如有错误或疏漏,还请大家谅解并不吝指正!也希望大家多多支持码农之家。

React Router V4使用指南(精讲)

一、前端路由和后端路由

1)后端路由

多页应用中,一个URL对应一个HTML页面,一个Web应用包含很多HTML页面,在多页应用中,页面路由控制由服务器端负责,这种路由方式称为后端路由。

多页应用中,每次页面切换都需要向服务器发送一次请求,页面使用到的静态资源也需要重新加载,存在一定的浪费。而且,页面的整体刷新对用户体验也有影响,因为不同页面间往往存在共同的部分,例如导航栏、侧边栏等,页面整体刷新也会导致共用部分的刷新。

2)前端路由

在单面应用中,URL发生并不会向服务器发送新的请求,所以“逻辑页面”的路由只能由前端负责,这种路由方式称为前端路由。

目前,国内的搜索引擎大多对单页应用的SEO支持的不好,因此,对于 SEO 非常看重的 Web
应用(例如,企业官方网站,电商网站等),一般还是会选择采用多页面应用。React 也并非只能用于开发单页面应用。

二、React Router 安装

这里使用的 React Router 的大版本号是 v4, 这也是目前最新版本。

React Router 包含3个库, react-router、react-router-dom、和 react-router-native。react-router 提供最基本的路由功能,实际使用,我们不会直接安装 react-router,而是根据应用运行的环境选择安装 react-router-dom(在浏览器中使用)或 react-router-native(在 react-native中使用)。react-router-dom 和 react-router-native 都依赖 react-router,所以在安装时, react-router 也会自动安装。

创建 Web应用,使用

npm install react-router-dom

创建 navtive 应用,使用

 npm install react-router-native

三、路由器

React Router 通过 Router 和 Route 两个组件完成路由功能。Router 可以理解成路由器,一个应用中需要一个 Router 实例,所有跌幅配置组件 Route 都定义为 Router 的子组件。在 Web应用中,我们一般会使用对 Router 进行包装的 BrowserRouter 或 HashRouter 两个组件 BrowserRouter使用 HTML5 的 history API(pushState、replaceState等)实现应用的 UI 和 URL 的同步。HashRouter 使用 URL 的 hash 实现应用的 UI 和 URL 同步。

BrowserRouter 创建的 URL 形式如下:http://example.com/some/path

HashRouter 创建的 URL 形式如下: http://example.com/#/some/path

使用 BrowserRouter 时,一般还需要对服务器进行配置,让服务器能正确地处理所有可能的URL。例如,当浏览器发生 http://example.com/some/path 和 http://example.com/some/path2 两个请求时,服务器需要能返回正确的 HTML 页面(也就是单页面应用中唯一的 HTML 页面)

HashRouter 则不存在这个问题,因为 hash 部分的内容会被服务器自动忽略,真正有效的信息是 hash 前端的部分,而对于单页应用来说,这部分是固定的。

Router 会创建一个 history 对象,history 用来跟踪 URL, 当URL 发生变化时, Router,的后代组件会重新渲染。React Router 中提供的其他组件可以通过 context 获取 history 对象,这也隐含说明了 React Router 中其他组件必须作为 Router 组件后代使用。但 Router 中只能唯一的一个子元素,例如:

// 正确
ReactDOM.render(
 (
 <BrowserRouter>
  <App />
 </BrowserRouter>),
 document.getElementById('root')
)
//错误,Router 中包含两个子元素
ReactDOM.render(
 (
  <BrowserRouter>
   <App1 />
   <App2 />
  </BrowserRouter>),
 document.getElementById('root')
)

四、路由器

Route 是 React Router中用于配置路由信息的组件,也是 React Router 中使用频率最高的组件。每当有一个组件需要根据 URL 决定是否渲染时,就需要创建一个 Route。

1) path

每个 Route 都需要定义一个 path 属性,当使用 BrowserRouter 时,path 用来描述这个Router匹配的 URL 的pathname;当使用 HashRouter时,path 用来描述这个 Route 匹配的 URL 的 hash。例如,使用 BrowserRouter 时,<Route path=''foo' /> 会匹配一个 pathname 以 foo 开始的 URL (如: http://example.com/foo)。当 URL 匹配一个 Route 时,这个 Route 中定义的组件就会被渲染出来。

2)match

当 URL 和 Route匹配时,Route 会创建一个 match 对象作为 props 中的一个 属性传递给被渲染的组件。这个对象包含以下4个属性。

(1)params: Route的 path 可以包含参数,例如 <Route path="/foo/:id" 包含一个参数 id。params就是用于从匹配的 URL 中解析出 path 中的参数,例如,当 URL = 'http://example.ocm/foo/1' 时,params= {id: 1}。

(2)isExact: 是一个布尔值,当 URL 完全匹时,值为 true; 当 URL 部分匹配时,值为 false.例如,当 path='/foo'、URL="http://example.com/foo" 时,是完全匹配; 当 URL="http://example.com/foo/1" 时,是部分匹配。

(3)path: Route 的 path 属性,构建嵌套路由时会使用到。

(4)url: URL 的匹配的方式

3)Route 渲染组件的方式

(1)component

component 的值是一个组件,当 URL 和 Route 匹配时,Component属性定义的组件就会被渲染。例如:

<Route path='/foo' component={Foo} >

当 URL = "http://example.com/foo" 时,Foo组件会被渲染。

(2) render

render 的值是一个函数,这个函数返回一个 React 元素。这种方式方便地为待渲染的组件传递额外的属性。例如:

<Route path='/foo' render={(props) => {
 <Foo {...props} data={extraProps} />
}}>
</Route>

Foo 组件接收了一个额外的 data 属性。

(3)children

children 的值也是一个函数,函数返回要渲染的 React 元素。 与前两种方式不同之处是,无论是否匹配成功, children 返回的组件都会被渲染。但是,当匹配不成功时,match 属性为 null。例如:

<Route path='/foo' render={(props) => {
 <div className={props.match ? 'active': ''}>
  <Foo {...props} data={extraProps} />
 </div>
}}>
</Route> 

  如果 Route 匹配当前 URL,待渲染元素的根节点 div 的 class 将设置成 active.

4)Switch 和 exact

当URL 和多个 Route 匹配时,这些 Route 都会执行渲染操作。如果只想让第一个匹配的 Route 沉浸,那么可以把这些 Route 包到一个 Switch 组件中。如果想让 URL 和 Route 完全匹配时,Route才渲染,那么可以使用 Route 的 exact 属性。Switch 和 exact 常常联合使用,用于应用首页的导航。例如:

<Router>
 <Switch>
  <Route exact path='/' component={Home}/>
  <Route exact path='/posts' component={Posts} />
  <Route exact path='/:user' component={User} />
 </Switch>
</Router>

如果不使用 Switch,当 URL 的 pathname 为 "/posts" 时,<Route path='/posts' /> 和 <Route path=':user' /> 都会被匹配,但显然我们并不希望 <Route path=':user' /> 被匹配,实际上也没有用户名为 posts 的用户。如果不使用 exact, "/" "/posts" "/user1"等几乎所有 URL 都会匹配第一个 Route,又因为Switch 的存在,后面的两个 Route永远不会被匹配。使用 exact,保证 只有当 URL 的 pathname 为 '/'时,第一个Route才会匹配。

5)嵌套路由

嵌套路由是指在Route 渲染的组件内部定义新的 Route。例如,在上一个例子中,在 Posts 组件内再定义两个 Route:

const Posts = ({match}) => {
 return (
  <div>
   {/* 这里 match.url 等于 /posts *

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到JavaScript使用atan2绘制箭头、 webpack 2的react开发配置详解、 JavaScript实现图片连播以及、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:bootstrap动态调用select下拉框的实现方法

下一篇:JS实现图片旋转动画封装与使用的实例及代码

展开 +

收起 -

React Router v4 相关内容
看透JavaScript:原理、方法与实践

本书由资深软件开发专家撰写,凝聚其多年开发经验,系统、深入、全面地阐释JavaScript,内容涉及流行的Web开发实践,结合实际案例进行讲解,授人以渔。本书内容并不局限于某个具体功能的

查看详情
JavaScript前端开发案例教程

JavaScript是这种运用于Web前端开发的开发语言,具备简易、易懂、实用的特性,用JavaScript开发设计网页页面能够提高网页页面的参与性,为客户出示即时的、动态性的互动感受。 《 JavaScript前端

查看详情
JavaScript权威指南 查看详情
你不知道的JavaScript 下卷

本书讲解JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍JavaScript中常被人误解和忽视的重要知识点,分为上中下三套,欢迎下载

查看详情
JavaScript核心技术开发解密

这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

查看详情
JavaScript网页动画设计

JavaScript网页动画设计 由业界先进的动画库Velocity。js的作者所著,书中内容共分为8章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验

查看详情
精通JavaScript

精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

查看详情
React Router v4 学习笔记
网友NO.328480

React-router v4 路由配置方法小结

本文主要介绍了React-router v4 路由配置方法小结,分享给大家,也给自己留个笔记 一. Switch 、Router 、Route三者的区别 1、Route Route 是建立location 和 ui的最直接联系 2、Router react-router v4 中,Router被拆分成了StaticRouter、MemoryRouter、BrowserRouter、HashRouter、NativeRouter。 MemoryRouter、BrowserRouter、HashRouter 等于 import { Router } from 'react-router'!--这里可以有三种--!--history 部分源码exports.createBrowserHistory = _createBrowserHistory3.default;exports.createHashHistory = _createHashHistory3.default;exports.createMemoryHistory = _createMemoryHistory3.default;--import createBrowserHistory from 'history/createBrowserHistory'//const history = createBrowserHistory()Router history={history} App//Router NativeRouter(给rn使用的) A Router for iOS and Android apps built using React Native. 这里新增strict 和 exact 使用了strict location 大于等于path才能匹配,eq path='/one' location='/on……

网友NO.204002

react-router v4如何使用history控制路由跳转详解

前言 距离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 v3的时候,我们想跳转路径,我们一般这样处……

网友NO.951202

关于react-router/react-router-dom v4 history不能访问问题的解决

前言 最近把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history 找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行完后才跳转页面,需要用到push 或者replace,怎么办啊,国内知识都是你复制我的,我复制你的,都特么垃圾。只能去Google, 最终找到了答案:(看代码一目了然) 解决方法 首先使用router import React, { Component } from 'react';import { BrowserRouter, Route } from 'react-router-dom';import { Provider } from 'mobx-react';import stores from '../store/index';import Bundle from '../components/bundle';import Hello from 'bundle-loader?lazy!../components/hello.jsx';// 这是按需加载,对于现在讨论的问题没有影响const HelloAPP = () = ( Bundle load={Hello} {(Hello) = Hello /} /Bundle);export default class App extends Component { constructor(props) { super(props); } render() { return ( Provider { ...stores } BrowserRoute……

网友NO.388749

React Router V4使用指南(精讲)

一、前端路由和后端路由 1)后端路由 多页应用中,一个URL对应一个HTML页面,一个Web应用包含很多HTML页面,在多页应用中,页面路由控制由服务器端负责,这种路由方式称为后端路由。 多页应用中,每次页面切换都需要向服务器发送一次请求,页面使用到的静态资源也需要重新加载,存在一定的浪费。而且,页面的整体刷新对用户体验也有影响,因为不同页面间往往存在共同的部分,例如导航栏、侧边栏等,页面整体刷新也会导致共用部分的刷新。 2)前端路由 在单面应用中,URL发生并不会向服务器发送新的请求,所以“逻辑页面”的路由只能由前端负责,这种路由方式称为前端路由。 目前,国内的搜索引擎大多对单页应用的SEO支持的不好,因此,对于 SEO 非常看重的 Web 应用(例如,企业官方网站,电商网站等),一般还是会选择采用多页面应用。Rea……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757