react 生态圈之 React Router

﹏ヽ暗。殇╰゛Y 2022-11-11 14:41 196阅读 0赞

#### 一、React Router，路由不止是页面切换，更是代码组织方式 ####

1.  为什么需要路由，如下所示：

*  单页应用需要进行页面切换
 *  通过 `URL` 可以定位到页面
 *  更有语义的组织资源

1.  `React Router` 的特性，如下所示：

*  声明式路由定义
 *  动态路由

1.  三种路由实现方式，如下所示：

*  `URL` 路径
 *  `hash` 路由
 *  内存路由

1.  基于路由配置进行资源组织，如下所示：

*  实现业务逻辑的松耦合
 *  易于扩展，重构和维护
 *  路由层面实现 `Lazy Load`

1.  `React Router API`，如下所示：

*  `<Link>`，普通链接，不会触发浏览器刷新
 *  `<NavLink>`，类型 `Link` 但是会添加当前选中状态
 *  `<Prompt>`，满足条件时提示用户是否离开当前页面
 *  `<Redirect>`，重定向当前页面，例如登录判断
 *  `<Route>`，路由配置的核心标记，路径匹配时显示对应组件
 *  `<Switch>`，只显示第一个匹配的路由

#### 二、React Router，参数定义，嵌套路由的使用场景 ####

1.  通过 `URL` 传递参数，如下所示：

*  如何通过 `URL` 传递参数，`<Route path ="/topic/:id" .../>`
 *  如何获取参数，`this.props.match.params`

1.  何时需要 `URL` 参数，页面状态尽量通过 `URL` 参数定义
2.  嵌套路由，如下所示：

*  每个 `React` 组件都可以是路由容器
 *  `React Router` 的声明式语法可以方便的定义嵌套路由

#### 三、UI 组件库的对比和介绍，Ant.Design，Material UI，Semantic UI ####

1.  选择 `UI` 库的考虑因素，如下所示：

*  组件库是否齐全
 *  样式风格是否符合业务需求
 *  `API` 设计是否便捷和灵活
 *  技术支持是否完善
 *  开发是否活跃

#### 四、使用 Next.js 创建 React 的同构应用 ####

1.  同构应用，浏览器初次发送请求给服务器，服务端逻辑，服务器返回渲染后的 `App` 页面给浏览器，客户端操作
2.  创建页面，如下所示：

*  页面就是 `pages` 目录下的一个组件
 *  `static` 目录映射静态文件
 *  `page` 具有特殊静态方法 `getInitialProps`

1.  在页面中使用其它 `React` 组件，如下所示：

*  页面也是标准的 `node` 模块，可使用其它 `React` 组件
 *  页面会针对性打包，仅包含其引入的组件

1.  使用 `Link` 实现同构路由，如下所示：

*  使用 `next/link` 定义链接
 *  点击链接时页面不会刷新
 *  使用 `prefetch` 预加载目标资源
 *  使用 `replace` 属性替换 `URL`

#### 五、使用 Jest、Enzyme 等工具进行单元测试 ####

1.  `React` 让前端单元测试变得容易，如下所示：

*  `React` 应用很少需要访问浏览器 `API`
 *  虚拟 `DOM` 可以在 `NodeJS` 环境运行和测试
 *  `Redux` 隔离了状态管理，纯数据层单元测试

1.  单元测试涉及的工具，如下所示：

*  `Jest，Facebook` 开源的 `JS` 单元测试框架
 *  `JS DOM`，浏览器环境的 `NodeJS` 模拟
 *  `Enzyme`，`React` 组件渲染和测试
 *  `nock`，模拟 `HTTP` 请求
 *  `sinon`，函数模拟和调用追踪
 *  `istanbul`，单元测试覆盖率

#### 六、常用开发调试工具，ESLint、Prettier、React DevTool，Redux DevTool ####

1.  `ESLint`，如下所示：

*  使用 `.eslintrc` 进行规制的配置
 *  使用 `airbnb` 的 `Javascript` 代码风格

1.  `Prettier`，如下所示：

*  代码格式化的神器
 *  保证更容易写出风格一致的代码

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 react-router-dom

1.安装 npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令 2. 基本操作　　home.j

╰半橙微兮°/ 2023年06月05日 08:50/ 0 赞/ 8 阅读

相关 react 生态圈之 React Router

一、React Router，路由不止是页面切换，更是代码组织方式 1. 为什么需要路由，如下所示：单页应用需要进行页面切换通过 `URL` 可以定位

﹏ヽ暗。殇╰゛Y/ 2022年11月11日 14:41/ 0 赞/ 197 阅读

相关 react 生态圈之 Redux

一、Redux 前端为何需要状态管理库 1. `Redux`，`JS` 状态管理框架，`Redux` 让组件通信更加容易，把 `store` 放在组件外，所有组件和 `

清疚/ 2022年11月11日 14:41/ 0 赞/ 186 阅读

相关 react-router

[入门][Link 1] [这里写链接内容][Link 2] [Link 1]: http://reacttraining.cn/web/guides/quick-st

我会带着你远行/ 2022年05月28日 23:38/ 0 赞/ 183 阅读

相关 React之react-router-dom

1:一些区别 1. `react-router` React Router 核心 2. `react-router-dom` 用于 DOM 绑定的 React Rou

拼搏现实的明天。/ 2022年05月20日 06:08/ 0 赞/ 198 阅读

相关 React - React-Router的简单介绍

Router中文意思是路由，以前多见于后端，现如今前端也有自己的路由。为什么要使用路由？ 1：单页页面实现页面的切换 2：可以通过URL对页面进行定位 3：语义化组织

港控/mmm°/ 2022年04月14日 02:49/ 0 赞/ 197 阅读

相关 React Router 4

\[译\] 关于 React Router 4 的一切 > 原文地址：[All About React Router 4][] > 原文作者：[BRAD WE

矫情吗；*/ 2022年03月25日 07:48/ 0 赞/ 187 阅读

相关 react-5 react的路由相关概念总结，react-router,react-router-dom

在学习React 的过程中，当学习到路由的时候，就会发现 react-router 或者 react-router-dom 组件；这是已经写好的，可以直接拿来使用的reac

末蓝、/ 2022年03月19日 19:07/ 0 赞/ 216 阅读

相关 React路由react-router-dom

文档分享 [react-router][] [react-router-dom][] [Ant Design of React][] [webpack配置Re

Myth丶恋晨/ 2022年02月26日 12:46/ 0 赞/ 309 阅读

相关 react router

React-Router提供两种路由方式，<BrowserRouter> 和<HashRouter>,<Route>路由规则<Switch>路由选项，<Link><NavLin

淩亂°似流年/ 2021年12月12日 08:45/ 0 赞/ 239 阅读