react路由中的meta怎么取出来

React路由中可以使用thispropsroutemeta来取出路由中的meta信息，其中的meta属性是个对象，里面存着当前页面的各种信息，这样就可以通过遍历对象，来获取当前页面的meta信息。

最近准备自己造一套轮子，技术栈暂定为react+typescript。在react引入ts的时候还是遇到了一些坑，所以写篇文章记录一下引入的过程。

引入ts么，就要先选择一个ts的解析工具，这里我根据文档选了awesome-typescript-loader，所以在webpackconfigjs里加

然后配置tsconfigjs文件，在配置的时候，我加了这样一个选项

然后在yarn test的时候出现了一些bug，引入react必须import as React from 'react'这么引， 否则就出错，报错如下

必须把它改成

所以tsconfigjs配置应如下

另外，我需要再引入一下tslint，所以还要配置一个

tslint

配置完成，下一节我会讲react里怎么使用ts。

### 课程介绍

TS在构建大型应用上的优势，以及与JS的完美互通，让TS未来一片光明，从0到1系统学习，把TS真正应用到框架和项目中。

在迷你“全栈”项目中学习TypeScript，以TypeScript完整串联前后端

基础与实战“融合”，将知识讲解融于项目开发中，让你更快的掌握TS工程开发所必须的知识点

### 目录

第1章 课程导学

本章主要介绍课程的知识大纲，学习前提，讲授方式及预期收获。

1-1 都2020了，还不抓紧学TypeScript

第2章 TypeScript 基础语法入门

本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势，帮助大家理解 TS 中的各种静态类型，包括：函数，数组，元组，类，抽象类接口等，迅速帮助大家理解 TS 的基础使用方式和语法。

2-1 安装 VsCode 编辑器

2-2 TypeScript的定义

2-3 TypeScript带来了什么优势

2-4 TypeScript基础环境搭建

2-5 静态类型的深度理解

2-6 基础类型和对象类型

2-7 类型注解和类型推断

2-8 函数相关类型

2-9 基础语法复习

2-10 数组和元组

2-11 Interface接口

2-12 类的定义与继承

2-13 类中的访问类型和构造器

2-14 静态属性，Setter和Getter

2-15 抽象类

2-16 作业节

第3章 使用 TypeScript 编写爬虫工具

本章将带大家使用 TypeScript 编写一个获取网站课程销量的爬虫工具，过程中对上一章节学习的 TypeScript 基础知识进行实践巩固，同时借助 TypeScript 中的 OOP 编程方式，给大家讲解部分面向对象开发中的设计模式。

3-1 爬虫概述及正版密钥获取 (04:48)

3-2 使用SuperAgent和类型定义文件获取页面内容 (18:43)

3-3 使用cheerio进行数据提取 (12:32)

3-4 爬取数据的结构设计和存储 (18:00)

3-5 使用组合设计模式优化代码 (21:21)

3-6 单例模式实战复习 (07:24)

3-7 TypeScript的编译运转过程的进一步理解 (21:04)

3-8 作业节

第4章 TypeScript 语法进阶

本章将给大家讲解更多的 TypeScript 进阶语法以及原理性知识。包括如何进行 TypeScript 编译过程的配置，联合类型，类型保护，枚举类型，泛型等知识点。同时也给大家扩展讲解了类型定义文件的使用及编写方式等内容。通过本章的学习，大家基本可以掌握 TypeScript 中绝大部分的语法知识点。

4-1 TypeScript中的配置文件（上）

4-2 TypeScript中的配置文件（下）

4-3 作业节

4-4 联合类型和类型保护

4-5 Enum 枚举类型

4-6 函数泛型

4-7 类中的泛型以及泛型类型

4-8 命名空间-namespace（上）

4-9 命名空间-namespace（下）

4-10 import对应的模块化-缺代码

4-11 使用 Parcel 打包 TS 代码

4-12 描述文件中的全局类型（上）

4-13 描述文件中的全局类型（下）

4-14 模块代码的类型描述文件

4-15 作业节

4-16 泛型中keyof语法的使用

第5章 使用 Express 框架开发数据爬取及展示接口

本章将在 Express 框架中使用 TypeScript 的语法进行登陆，数据爬取和展示接口的开发，过程中对之前的基础语法进行实践巩固，同时讲解以 JavaScript 作为开发语言的框架中使用 TypeScript 会遇到的问题以及解决方案。

5-1 Express 基础项目结构搭建

5-2 使用TS编写常规express代码遇到的问题

5-3 扩展解决 Express 的类型定义文件问题

5-4 登陆功能的开发

5-5 统一接口数据结构，优化代码

第6章 TypeScript 高级语法

本章主要讲解 TypeScript 中，装饰器和元数据的语法知识，包括类装饰器，方法装饰器，属性装饰器和参数装饰器在本章中都会详细讲解，通过本章的学习，大家基本上完成了对 TypeScript 所有重点语法的学习。

6-1 类的装饰器（1）

6-2 类的装饰器（2）

6-3 方法装饰器

6-4 访问器的装饰器

6-5 属性的装饰器

6-6 参数装饰器

6-7 装饰器实际使用的小例子

6-8 reflect-metadata

6-9 装饰器的执行顺序

6-10 作业节

第7章 Express 项目代码改良

结合上一章学习的装饰器和元数据的语法知识，本章将通过面向对象的方式，对之前的接口代码进行全面重构，最终帮大家编写出和当前主流 Node 框架风格一致的后端应用代码，对上一章的知识点进行实战巩固，同时帮助大家理解 Node 框架设计背后的原理性知识。

7-1 创建控制器和装饰器

7-2 通过装饰器实现项目路由功能

7-3 多种请求方法装饰器的生成

7-4 中间件装饰器的编写

7-5 代码结构优化

7-6 练习题：如何在一个方法上使用多个装饰器

第8章 使用 React 编写爬取数据的展示页面

本章将带大家使用TS的语法进行前端 React 代码的开发，过程中会给大家讲解在 React 和 Redux 等前端核心框架上如何正确巧妙的使用TypeScript。本章的最后，我们将产出一个完整的爬虫项目，并通过可视化的方式，对爬取到的数据进行展示。

8-1 初始化 React 项目

8-2 编写登陆表单

8-3 类型及路由的使用

8-4 前后端代码联调及登陆跳转逻辑开发

8-5 登陆退出功能完整优化

8-6 数据爬取功能打通及 Echarts 的使用

8-7 折线图数据处理及展示

8-8 接口数据类型的冗余定义问题

8-9 通过 Typescript 简化前后端协作模式

第9章 课程总结

本章将对整个项目所学习到的知识点进行总结，并给出大家进一步深入学习 TS 的方法和技巧。

9-1 课程总结及后续学习方法推荐

### 获取方式：TypeScript 系统入门到项目实战

找工作时发现有一些公司是以React作为技术栈的，而且薪资待遇都不错，为了增加生存的筹码，所以还是得去学一下React，增加一项求生技能。因为我用Vue20开发项目已经四年了，故用Vue20开发项目的思路来学习React。

前端项目是由一个个页面组成的，对于Vue来说，一个页面是由多个组件构成的，页面本身也是一个路由组件。对于React来说也是如此。Vue会提供一系列技术支持来完成一个组件的开发，可以从这一系列技术支持出发，去React中寻找对应的技术支持来入门React，比如React中如何开发组件的UI，React中如何使用组件，React中如何定义组件数据等等。

本专栏将按照这个思路带领你从Vue20入门React17。

首先得选择一个脚手架搭建一个React工程，React有很多脚手架，为什么选择UmiJS这个脚手架，不为什么，这个脚手架和Vue Cli比较类似，至少路由配置和Vue Router很类似。

在学习前，先用UmiJS搭建一个React工程，步骤很简单：

可以看见myapp这个React工程的目录结构如下所示：

打开 umircts 文件，其内容如下所示

其路由是在 routes 选项中配置，配置和Vue Router非常相似，具体如何配置放在后面介绍路由跳转和传参中一并介绍。

接下来在 src/pages/indextsx 文件中书写demo来学习React。

Vue和React中所开发的都是组件，其页面也是一个路由组件。在Vue中组件是定义在后缀为 vue 的文件中，在React中组件是定义在后缀为 js 的文件中，若使用TypeScript来开发React，则其组件是定义在后缀为 tsx 的文件中。

那如何开发一个组件的UI部分，例如开发一个 HelloWorld 组件在浏览器页面上展示 hello world ，一个组件的UI包括HTML部分和CSS部分。

组件的HTML部分，Vue推荐使用template模板，React推荐使用JSX语法。

在工程的 src/pages 文件夹中创建一个 HelloWorldjs 文件，在其中开发HelloWorld组件。

此外React组件有两种定义方法，一种是函数形式，一种是ES6的class形式。

函数形式，称为函数组件：

ES6的class形式，称为类组件：

这里要注意函数名的首字母要大写 。在函数中的 return 后面用JSX语法来开发组件的UI部分。

另外还要注意在 return 后面的内容最外面要用 () 括起来，否则在 return 同一行后面最少跟一个 < 才可以，如下所示：

这样看起来是不是怪怪的，所以最好加个 () 。

关于组件的CSS部分，其最重要的是绑定 Class 和 Style，才能给组件的HTML添加样式。

先来看一下 Class 与 Style 是固定不变，React 中是怎么绑定的。

React中是用 className 来绑定 Class，用 style 来绑定 Style。其中 style 接受的值是一个对象，且用 {} 中括号传入，而且对象的属性名只能用驼峰式 (camelCase) 来命名。

在来看一下 Class 与 Style 是变量，在React中是怎么绑定的。

在React中是使用 {} 给属性赋值变量，且 className 只接受字符串，不接受数组或者对象，可以用ES6的模板字符串功能来拼接变量生成字符串。

在函数组件的写法中用 useState 这个React Hook定义了一些变量， useState 的作用放在后面介绍。

HelloWorld 组件写好了，要如何使用呢？先回顾一下在Vue中是如何使用组件的，在使用组件前要先注册，可以注册为全局组件或局部组件。

在React中是没有注册组件的概念，因为组件相当一个函数，只有引入组件的概念，也没有全局组件的概念。使用组件前必须用 import 先把组件引入并命名。

在React中组件的命名必须以大写字母开头，因为 React 会将以小写字母开头的组件视为原生 DOM 标签 。

从开发Vue组件的经验来说，一个组件的数据，可以分为内部数据和参数数据两种。对于React也是如此，在React中把内部数据称为state，把参数数据称为props。

在上面介绍React中如何绑定变量形式的 Class 和 Style 的过程已经定义了 styleData 、 isHead 、 className 这些内部数据。

个人推荐使用函数形式来开发React组件，可以使用React Hook，来避免去学习 ES6 中 的 class 语法，还有烦人的 this 指向问题，从而来降低入门难度。

关于的React Hook 可以看 这里 。

props用来接收外部传递给组件的数据。例如在 HelloWorld 组件中定义 title 一个参数数据。

在类组件中的构造函数 constructor 接受 props 作为传入组件的参数数据集合，并调用 super(props) 把 props 传给 ReactComponent 构造函数，这样类组件才能接受参数数据集合 props ，再用 thispropstitle 来读取 title 参数数据的值，另外可以用 defaultProps 来定义 title 参数数据的默认值。

函数组件接收一个 props 作为传入组件参数数据的集合，利用 ES6 解构赋值的功能，来获取组件的参数数据，并可以给参数数据设置默认值。

这里要注意了 ，在Vue的template模板中是用 {{}} （双大括号）来使用数据的，而在React中是统一用 {} （单大括号）来使用数据的。

参数数据Props是用接收外部传递给组件的数据，那React中如何向组件传递数据呢？

在Vue中规定了动态数据和字符串、数字、布尔值、数组、对象类型的静态数据如何传递给组件，我们一一对应去寻找React中如何传递。

可见在React中，除了传递字符串类型的静态数据，都要用 {} 包裹数据再赋值给组件标签上的属性来传递数据给组件。

React中用 onClick 来监听点击事件，用 {} 包裹点击事件触发时执行的函数，再赋值给 onClick 。

其中 onClick 是一个合成事件，在Vue中 @ 后面跟着是DOM的原生事件，而React中 on 后面跟着并不是DOM的原生事件。例如Vue中监听双击事件 @dblclick ，而React中监听双击事件 onDoubleClick 。

React中的合成事件具体可以看 这里 。

在Vue中用 native 修饰符来监听组件上的DOM事件，而在React中监听组件上的DOM事件要这样实现。

例如在组件上监听click事件，先要把click事件触发时要执行的函数当作Props给组件传递进去，在组件的根元素上监听click事件，click事件触发时执行该Props，这样来间接监听组件上的click事件。具体实现如下所示：

上面介绍了，React组件的数据分为内部数据state和参数数据props，对应的改变方法也不一样。

比如要改变组件中定义的内部数据 title 。

在 thissetState() 中可以传递一个函数或一个对象，建议传递一个函数 (state,props) =>{} ，函数可以接受内部数据state和参数数据props作为参数，而且 state 和 props 只读无法修改，每次调用 thissetState 时读取到的state和Props都是最新，特别适用多次调用 thissetState 修改同一个state的场景。最后函数放回一个对象，对象的内容为要修改的state。

在React中称内部数据为state，使用 useState(param) 定义一个state时，可以通过参数 param 设置state的默认值，其返回一个数组，数组的第一个值是state，数组的第二个值是改变state的函数，可以调用该函数来改变state。

另外用 useState 定义的数据是响应式的，若页面有使用该数据，该数据改变后页面会重新渲染。

跟Vue一样，在组件中是不能直接改变props，假如要改变props，只能通过在父组件中改变传递给子组件的数据来间接改变props，那在子组件中怎么让父组件改变传递给子组件的数据呢，将在React中父子组件如何通讯介绍。

用一个例子来介绍，假如 HelloWorld 组件的 “hello world” 是用参数数据props中的 title 展示，点击组件中的改变标题按钮时变成 “hello React” 。

在父组件中定义一个 info 数据传递给子组件的 title 参数数据，同时也定义了一个回调函数 handleChangeTitle 来改变 info 数据，并把回调函数也传递给子组件的 changeTitle 参数数据。

这样子组件的 changeTitle 参数数据可以作为一个函数来调用，调用 changeTitle 时相当调用 handleChangeTitle 回调函数，可以把要改变的值通过 data 函数参数传递出来，再执行 setInfo(data) 改变 info 数据，再传递给子组件的 title 参数数据，间接改变了 title 参数数据，实现了React中组件如何改变参数数据。

在父组件中也可以调用 setInfo 改变传递给子组件的 title 参数数据的 info 数据，以上就是React中父子组件通讯的一个方法。

在Vue中可以用简单地用 watch 来监听数据的变化，而在React中比较复杂，子组件的类型不同实现方法也不同。

在类组件中用 componentDidUpdate 这个生命周期方法来实现，该方法首次渲染时 componentDidUpdate 不会执行，在后续props和state改变时会触发 componentDidUpdate ，其接受的第一个参数 prevProps 代表改变前的props，第二参数 prevState 代表改变前的state。

在函数组件中，可以 useEffect 这个React Hook监听数据的变化，但是无法像Vue的 watch 能够获取改变前的旧数据。所以要自定义一个Hook来实现类似Vue的 watch 的功能。自定义Hook是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。故把这个自定义Hook称为 useWatch 。

如何获取改变前的旧数据，可以在第一次数据改变时触发 useWatch 时用一个容器把旧数据存储起来，下次再触发 useWatch 时通过读取容器中的值就可以获取改变前的旧数据。容器可以用 useRef 这个 Hook 来创建。

但是 useEffect 会在组件初次渲染后就会调用一次，导致 callback 回调函数会被执行一次，另外在Vue的 watch 是用 immediate 配置来控制在组件初次渲染后马上执行 callback 回调函数，且默认不会在组件初次渲染后执行 callback 回调函数，接着在 hookjs 中定义一个 useWatch 。

首先实现一下组件初次渲染不执行 callback 回调函数。

再添加 immediate 配置来控制在组件初次渲染后是否马上执行 callback 回调函数。

另外Vue的 watch 还返回一个 unwatch 函数，调用 unwatch 函数可以停止监听该数据。

useWatch 这个Hook 定义好后，这么使用。

在Vue中是使用 ref 给子组件赋予一个标识 ID ，再使用 this$refs[ID] 访问到这个子组件的实例对象，然后通过实例对象去调用子组件的方法。而在React中比较复杂，子组件的类型不同实现方法也不同。

useRef() 无法使用在函数组件上使用，在函数组件中要先使用 useImperativeHandle 定义要暴露给父组件的实例值，另外要把函数组件传入 forwardRef 处理后再导出。

其实React中是没有插槽的概念，不过可以用 propschildren 来实现插槽的功能。

例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，也可以用插槽的形式来实现，通过 propschildren 把 “ hello World ” 从父组件传递进去。

类组件的写法：

函数组件的写法：

可以通过props给子组件传递一个函数，如果这个函数最后返回React元素，其React元素是用JSX语法编写的，这样就间接实现具名插槽的功能。

例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，用具名插槽的形式来实现。

类组件的写法：

函数组件的写法：

Vue的作用域插槽的作用是用子组件中的数据在父组件中写插槽内容。

回顾上面具名插槽的实现过程，先在父组件中定义一个函数，该函数能返回一个React元素，再通过props把该函数传递给子组件，在子组件中执行该函数，把执行结果添加到子组件的React元素中。

如果在子组件中执行该函数时，把子组件的数据当作参数传递进去，那么在父组件中就可以用该函数接收子组件的数据来写React元素（插槽的内容）。这样就实现了作用域插槽。

例如开发一个 HelloWorld 组件用来展示 “ 用子组件的数据写具名插槽 hello World ” ，用作用域插槽的形式来实现。

类组件的写法：

函数组件的写法

以上从Vue开发一个组件会用到的技术，在React中寻找对应的实现方案的角度来入门React，读完你应该会用React开发一些简单的页面，并能把页面分割成一个个组件，并在组件之间进行数据交互。下一篇文章将介绍开发组件时 在Vue中那些常用的指令在React中是如何实现的 。

通过createPortal渲染的元素会被添加到另外的节点，同时点击事件会被触发。

而通过ReactDOMrender渲染的元素添加到新节点，但是点击事件没有触发。

解释一下 moduleless： 因为用的 vite 构建工具

1、React-Router-dom;

(1)npm install react-router-dom; -> 引入

(2)分类：HahRouter、BrowserRouter；                                                                                [1]HahRouter -> localhost:3000/#/topics ->其会在路径后添加#,容易与hash#混乱；                      [2]取别名[方便后续修改]：BrowserRouter as Router

(3)<Route path="" component={} ></Route>;

[1]若只有一个<Route></Route>,默认path="/"; -> 其也可以省略

[2]若有多个<Route></Route>，最后一个不写path,表示除了上面所示的路由，其它路由都会跳转到该组件；

(4)<Switch></Switch>;//匹配到便不会再向下匹配，常配合exact属性一起使用 => 匹配一模一样的，exact={true};也OK；

(5)<Redirect to=""></Redirect>;//重定向：若是以上都匹配不到，自动跳转到首页/或其它页

(6)路由跳转<Link to="">; <NavLink to="">;// 最终都转换为<a>标签，但不能取别名，Vue中使用tag属性可以取别名；<NavLink>优势：其跳转页面，系统会自动加类名active,巧妙利用更改样式；=>两者大多结合exact属性使用；

2、二级路由：

3、动态路由：

跳转 -> thisprops -> 路由的相关值

4、高阶组件withRouter(); -> withRouter(组件);包裹组件即可 -> 目的：使用其可让组件内所有元素拥有thispropshistory/location/match等属性；

thispropshistorypush('/');//重定向路由

5、路由权限控制 -> React没有相关API，都要自己写；

(1)登录相关：登录成功种cookie -> 其它页面查看 -> 若有cookie,正常跳转页面，若没有，提示框+跳转登录页面；

(2)页面获取数据：1父组件向子组件传值；2某页面将数据设置到浏览器存储中，一般为localStorage其获取到的是JSON对象，JSONparse(localStoragegetItem('articleList')); -> 其它页面需要数据时，从存储中拿即可；

(3)高阶组件[包裹 -> 返回具有某功能的组件]

(4)Prompt组件 -> 进入/离开的时候都会进行询问；

[1]引入：import { Switch, Route, Redirect, Prompt } from 'react-router-dom';

[2]使用：<Prompt message="" ></Prompt>; message= { () =>{ return true/false }}

补充：

(1)<form onSubmit={ thishandleSubmit }></form>;

(2)epreventDefault();//React中阻止默认事件只有此方法；

(3)<Link>、<NavLink>组件最终都转换为a标签 -> React不能取别名，Vue可以 -> React可使用高阶组件来解决此类需求；

以上就是关于react路由中的meta怎么取出来全部的内容，包括:react路由中的meta怎么取出来、react的ts配置、TypeScript 系统入门到项目实战等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！