React路由与实践|青训营笔记

42 阅读2分钟

一,react的高阶组件

react中用于复用组件逻辑的一种方式。成为HOC。他不是react的API,而是一种设计模式。

高阶组件简单说就是参数为组件,返回的一个新组件。

二、react路由的使用

路由有两种模式,-种是BrowserRouter以/切换路由,一-种是HsahRouter,以#切换路由

安装: npm i react-router-dom -S

react中用于复用组件逻辑的- -种方式。成为HOC。他不是react的API,而是- -种设计模式。

高阶组件简单说就是参数为组件,返回的一一个新组件。

注意: React 中的组件如果作为标签的话,第一个字母要大写

4d3be79783bba32c6adf21d754a80db.jpg

react路由: react-router-dom

路由有两种模式,一种是BrowserRouter以/切换路由,-种是HsahRouter,以#切换路由

安装: npm i react-router-dom -S使用:

s1:引入:

s2:所有组件都要被包裹

s3:所有的路由组件都在Routes (渲染路由的容器)中切换s4:Route就可以引入不同的组件(配置路由的组件)

s5:可以通过link标签去切换不同的路由

3265b2b4aff70c56aa10713947a8b2c.jpg

动态路由

动态路由配置了就必须传, 组件中通过useParams去获取路由参数

d03d5069452e58f7377a38f7421322f.jpg vscode中开发react的插件

eslint代码风格检测插件

Prettier ESLint自动修复不符合规范的代码风格Reactjs code snippets react 开发插件

react的虚拟根组件

因为每个react组件都有一个根标签。 有一一个Fragement可以作为跟标签使用,但是渲染的时候不会渲染出来。

引入antd组件的方法

在index.js中引入antd的css样式 登录页面的开发笔记

1 login页面使用scss开发样式的话,命名要加上module比如index.module.scss,放在同-个page的目录下。这样就相当于是局部样式

2在页面中引入,所有的类名都作为styles对象的属性,通过中括号或者点语法

3 react的组件,统- -使用jsx的后缀,而且使用呢jsx后缀以后开发中可以通过tab去生成标签。