@shixinde/vuepress-theme-init
Version:
701 lines • 185 kB
HTML
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.14" />
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html,
body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme')
const systemDarkMode =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true)
}
</script>
<link rel="icon" href="/favicon.ico"><title>React 笔记 | Guoguo-notes</title><meta name="description" content="袁果锅笔记">
<link rel="preload" href="/guoguo-notes/assets/style-35EaXqtH.css" as="style"><link rel="stylesheet" href="/guoguo-notes/assets/style-35EaXqtH.css">
<link rel="modulepreload" href="/guoguo-notes/assets/app-Dx9bNbfq.js"><link rel="modulepreload" href="/guoguo-notes/assets/React 笔记.html-BPeqw1PX.js">
<link rel="prefetch" href="/guoguo-notes/assets/index.html-D6hY1Pr0.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React.html-DpSypgmq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java jdk 管理.html-UyxKEztz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/lingzhi.html-DrDRjKEH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/临时使用.html-D81L-GXB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/新公司.html-Bp4Oxj5H.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目架构升级版.html-CpJwv32O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/风扬小记.html-BTKAsyQB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python代码片段.html-3rxV2C-F.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python笔记.html-DfxyADl3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/AjaxResult.html-CcB1SHt9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 基础.html-C0Mw79YJ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 注解.html-DMhJ2pfz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MyBatis Plus.html-DXaupZNq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MySQL完整.html-E-VKR_Bm.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Mybatis 语法.html-BtyLUnj2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/StringBoot.html-IewOkkS1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea 插件.html-yFlZz-2q.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea快捷键.html-CI1PJIaN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java 代码片段.html-mGveOiyh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/mySql.html-mha8lKTS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页插件使用.html-BpMDhHym.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目初始化.html-TexbaFDo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/02_react案例_笔记.html-BzISG9Ro.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/03_react-router_教程.html-CiEuDnOl.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/04_react-UI_教程.html-CptRBAn1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/05_redux笔记.html-BBtVc0mQ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 项目配置流程.html-BXl6Ye6r.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷React扩展笔记.html-CCxyveD2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷react-redux笔记.html-DYzvAaxv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-3ZVA3kn7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element Plus --vue3.0.html-DXuv_b9N.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element ui 笔记.html-sVqlVk_V.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Taro.html-CA8JB-of.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 代码片段.html-DKeMa5iO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 全局封装 main.js.html-D9vo-8hy.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 笔记.html-DGHKF3_K.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3 .html--oEgCjOt.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3_Element Plus.html-BVAoHXff.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/element plus 本地启动.html-CgsgPmvg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 代码片段.html-G1ShCdaZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 笔记.html-BtuYzmC-.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp笔记.html-ok2vMZAr.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite 笔记.html-D-EBkJ0C.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite手写插件.html-Cggy24Oh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vue.js 下载文件.html-B1uCoFDS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vueuse笔记.html-DS6eTZ6y.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vxe-table笔记.html-yUGgZHig.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/代码片段 - 解析数学公式.html-DdcBDyRv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用插件.html-CZkTIVvE.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/汇智腾远笔记.html-moZCMq7M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/视频播放插件.html-BcEFDEgf.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS笔记.html-fAv9dNNH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Echarts.html-Cge55fid.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git 代码管理.html-B63UoB0T.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Html 笔记.html--NntXjWX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/TypeScript.html-D-Qjaudh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/axios 请求拦截.html-D1TCv2Mj.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-Ka8coTuF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/npm.html-B-EmKZd8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/sh 笔记.html-B3G_4KZW.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/valibot校验学习.html-BBH2-2ZH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/云开发教程.html-DRtT7hW1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/公共API接口.html-p1pxjePH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/小程序笔记.html-BJbLxiMh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/插件库.html-CZ-6S-Qp.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器.html-BNfIswB8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器部署教学.html-T1qkai4O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/浏览器px to rem适配.html-DPzD4TkF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/登录逻辑.html-D5sdqJbb.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/网站配色.html-B_2Exge9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/跨域代理.html-BYkKrkY7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/接入AI.html-DVRrF1MA.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/查看 编辑对话框组件.html-zEZcOjWH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/简易电影选座.html-TuQVklis.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-1f6p3-c_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS--common.html-D0ck7nMZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/ES6.html-wEFap9Uq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git提交.html-CHssaRZs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Js获取当前时间的方法.html-BRnoMyWs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-App笔记.html-BUy_Af_M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-app API.html-CAzH1d66.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uniapp-插件.html-DB8eOvmu.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/VueX 笔记.html-BrvLUsYq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js函数封装.html-Cc5d9Th4.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-CIq-xlv8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uView基本使用.html-CCsyyvNN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp 引入组件库.html-BnVxGutO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用正则表达式.html-AS2O_lcX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/界面类.html-BEOhA9U_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/笔记.html-DcjAVSiK.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/组件封装.html-BF9gShal.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/编程逻辑整理.html-CZRD3wTo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/调用接口.html-DniVQnty.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SSH 配置.html-9u6Q-DHg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Editor.html-CfSL24h8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页组件.html-DcRa4Q6p.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/拖拽组件.html-D6yjy7lX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-LinbGCk2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/GIt 代码提交规范及步骤.html-w7f6_4N9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/命名_ 开发期间的命名规范.html-DhnWSrsL.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/大佬项目组织规范.html-B32Km5um.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/重要_框架 - 初始化项目约束.html-Sw9ULLk3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/404.html-BZdzN0T2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SearchResult-DqPIHYal.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="vp-theme-container external-link-icon"><!--[--><header class="vp-navbar"><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href="/guoguo-notes/"><!----><span class="vp-site-name" aria-hidden="true">Guoguo-notes</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link route-link-active auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><button class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!--[--><button type="button" class="search-pro-button" aria-label="搜索"><svg xmlns="http://www.w3.org/2000/svg" class="icon search-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="search icon" name="search"><path d="M192 480a256 256 0 1 1 512 0 256 256 0 0 1-512 0m631.776 362.496-143.2-143.168A318.464 318.464 0 0 0 768 480c0-176.736-143.264-320-320-320S128 303.264 128 480s143.264 320 320 320a318.016 318.016 0 0 0 184.16-58.592l146.336 146.368c12.512 12.48 32.768 12.48 45.28 0 12.48-12.512 12.48-32.768 0-45.28"></path></svg><div class="search-pro-placeholder">搜索</div><div class="search-pro-key-hints"><kbd class="search-pro-key">Ctrl</kbd><kbd class="search-pro-key">K</kbd></div></button><!--]--></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar"><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link route-link-active auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active">React笔记 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/02_react%E6%A1%88%E4%BE%8B_%E7%AC%94%E8%AE%B0.html" aria-label="1. 02_react案例_笔记.md"><!---->1. 02_react案例_笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/03_react-router_%E6%95%99%E7%A8%8B.html" aria-label="2. 03_react-router_教程.md"><!---->2. 03_react-router_教程.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/04_react-UI_%E6%95%99%E7%A8%8B.html" aria-label="3. 04_react-UI_教程.md"><!---->3. 04_react-UI_教程.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/05_redux%E7%AC%94%E8%AE%B0.html" aria-label="4. 05_redux笔记.md"><!---->4. 05_redux笔记.md<!----></a><!----></li><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="5. React 笔记.md"><!---->5. React 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE%E6%B5%81%E7%A8%8B.html" aria-label="6. React 项目配置流程.md"><!---->6. React 项目配置流程.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/%E5%B0%9A%E7%A1%85%E8%B0%B7React%E6%89%A9%E5%B1%95%E7%AC%94%E8%AE%B0.html" aria-label="7. 尚硅谷React扩展笔记.md"><!---->7. 尚硅谷React扩展笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/%E5%B0%9A%E7%A1%85%E8%B0%B7react-redux%E7%AC%94%E8%AE%B0.html" aria-label="8. 尚硅谷react-redux笔记.md"><!---->8. 尚硅谷react-redux笔记.md<!----></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h2 id="初始化包" tabindex="-1"><a class="header-anchor" href="#初始化包"><span>初始化包</span></a></h2><div class="language-node line-numbers-mode" data-highlighter="prismjs" data-ext="node" data-title="node"><pre class="language-node"><code><span class="line">cnpm i react-redux react-router-dom redux</span>
<span class="line">cnpm i reset-css //初始化样式 安装这个包以后在 main.js中最上方引入即可清除样式</span>
<span class="line">cnpm i sass -D -S</span>
<span class="line">cnpm i react react-redux --save</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="项目中一般使用-purecomponent-而不是用-component" tabindex="-1"><a class="header-anchor" href="#项目中一般使用-purecomponent-而不是用-component"><span>项目中一般使用 PureComponent 而不是用 Component</span></a></h2><h2 id="调用接口-配置代理" tabindex="-1"><a class="header-anchor" href="#调用接口-配置代理"><span>调用接口 配置代理</span></a></h2><blockquote><h4 id="方法一、只能配置一个-3000-5000端口数据" tabindex="-1"><a class="header-anchor" href="#方法一、只能配置一个-3000-5000端口数据"><span>方法一、只能配置一个 3000==>5000端口数据</span></a></h4></blockquote><p>1.在page.json中添加 这个地址 是 请求路径</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token string-property property">"proxy"</span><span class="token operator">:</span> <span class="token string">"http://localhost:5000"</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>2.调用接口 注意，这个地址 是 该为当前路径</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token function-variable function">getStudentData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/students'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'成功'</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'失败了'</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>说明：</p><ol><li>优点：配置简单，前端请求资源时可以不加任何前缀。</li><li>缺点：不能配置多个代理。</li><li>工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）</li></ol><blockquote><p>方法二，高级配置</p></blockquote><p>在src目录下创建文件 <code>setupProxy.js</code>, 并写入以下代码</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span> createProxyMiddleware <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"http-proxy-middleware"</span><span class="token punctuation">)</span></span>
<span class="line">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">app</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token function">createProxyMiddleware</span><span class="token punctuation">(</span><span class="token string">"/api1"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">"http://localhost:5000"</span><span class="token punctuation">,</span> <span class="token comment">//配置转发目标地址(能返回数据的服务器地址)</span></span>
<span class="line"> <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//控制服务器接收到的请求头中host字段的值</span></span>
<span class="line"> <span class="token literal-property property">pathRewrite</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"^/api1"</span><span class="token operator">:</span> <span class="token string">""</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">//去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">/*</span>
<span class="line"> changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000</span>
<span class="line"> changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000</span>
<span class="line"> changeOrigin默认值为false，但我们一般将changeOrigin值设为true</span>
<span class="line"> */</span></span>
<span class="line"> <span class="token function">createProxyMiddleware</span><span class="token punctuation">(</span><span class="token string">"/api2"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">"http://localhost:5001"</span><span class="token punctuation">,</span> <span class="token comment">//配置转发目标地址(能返回数据的服务器地址)</span></span>
<span class="line"> <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//控制服务器接收到的请求头中host字段的值</span></span>
<span class="line"> <span class="token literal-property property">pathRewrite</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"^/api2"</span><span class="token operator">:</span> <span class="token string">""</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>说明：</p><ol><li>优点：可以配置多个代理，可以灵活的控制请求是否走代理。</li><li>缺点：配置繁琐，前端请求资源时必须加前缀。</li></ol><h2 id="组件沟通-消息订阅与发布" tabindex="-1"><a class="header-anchor" href="#组件沟通-消息订阅与发布"><span>组件沟通，消息订阅与发布</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> PubSub <span class="token keyword">from</span> <span class="token string">'pubsub-js'</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><h5 id="search-组件订阅消息-pubsub-publish-订阅名字-订阅数据" tabindex="-1"><a class="header-anchor" href="#search-组件订阅消息-pubsub-publish-订阅名字-订阅数据"><span>search 组件订阅消息 -- PubSub.publish('订阅名字', 订阅数据)</span></a></h5></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">PubSub<span class="token punctuation">.</span><span class="token function">publish</span><span class="token punctuation">(</span><span class="token string">'atguigu'</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>items<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><h5 id="list-组件-接收消息" tabindex="-1"><a class="header-anchor" href="#list-组件-接收消息"><span>List 组件 接收消息，</span></a></h5></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//挂载时 接收订阅的消息</span></span>
<span class="line"> <span class="token keyword">const</span> token <span class="token operator">=</span> PubSub<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token string">'atguigu'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">users</span><span class="token operator">:</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//组件将要卸载时 取消订阅组件消息</span></span>
<span class="line"> PubSub<span class="token punctuation">.</span><span class="token function">unsubscribe</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>token<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由-调用组件-动态样式" tabindex="-1"><a class="header-anchor" href="#路由-调用组件-动态样式"><span>路由 调用组件，动态样式</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'./App.css'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> NavLink<span class="token punctuation">,</span> Route，BrowserRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"><span class="token keyword">import</span> List <span class="token keyword">from</span> <span class="token string">'./components/List'</span></span>
<span class="line"><span class="token keyword">import</span> Search <span class="token keyword">from</span> <span class="token string">'./components/Search'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>BrowserRouter<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>NavLink activeClassName<span class="token operator">=</span><span class="token string">'demo'</span> to<span class="token operator">=</span><span class="token string">'/list'</span><span class="token operator">></span> list<span class="token operator"><</span><span class="token operator">/</span>NavLink<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>NavLink activeClassName<span class="token operator">=</span><span class="token string">'demo'</span> to<span class="token operator">=</span><span class="token string">'/search'</span><span class="token operator">></span> search<span class="token operator"><</span><span class="token operator">/</span>NavLink<span class="token operator">></span> <span class="token operator"><</span>hr <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/list'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>List<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/search'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Search<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由-多标签截至-switch" tabindex="-1"><a class="header-anchor" href="#路由-多标签截至-switch"><span>路由 多标签截至 Switch</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Switch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"><span class="token operator"><</span>Switch<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Switch<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Switch<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/list'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>List<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/search'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Search<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Switch<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="解决样式丢失" tabindex="-1"><a class="header-anchor" href="#解决样式丢失"><span>解决样式丢失</span></a></h2><blockquote><h5 id="_1-更改引入样式表的" tabindex="-1"><a class="header-anchor" href="#_1-更改引入样式表的"><span>1. 更改引入样式表的</span></a></h5></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"./css/bootstrap.css"</span><span class="token operator">></span> <span class="token comment">//原有路径</span></span>
<span class="line"> <span class="token comment">// 改为下面这种写法</span></span>
<span class="line"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"%PUBLIC_URL%/css/bootstrap.css"</span><span class="token operator">></span> </span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h4 id="_2-更改当前路径" tabindex="-1"><a class="header-anchor" href="#_2-更改当前路径"><span>2. 更改当前路径</span></a></h4></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"./bootstrap.css"</span><span class="token operator">></span> <span class="token comment">//原有路径</span></span>
<span class="line"> <span class="token comment">// 改为下面这种写法</span></span>
<span class="line"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"icon"</span> href<span class="token operator">=</span><span class="token string">"/css/bootstrap.css"</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h5 id="_3-更改路由模式-地址从-history路由-转为-hash路由" tabindex="-1"><a class="header-anchor" href="#_3-更改路由模式-地址从-history路由-转为-hash路由"><span>3. 更改路由模式： 地址从 history路由 转为 hash路由</span></a></h5></blockquote><h2 id="路由重定向" tabindex="-1"><a class="header-anchor" href="#路由重定向"><span>路由重定向</span></a></h2><blockquote><p>再所有组件的最下方，写 <code> <Redirect to='/路径名' /></code></p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>NavLink activeClassName<span class="token operator">=</span><span class="token string">'demo'</span> to<span class="token operator">=</span><span class="token string">'/list'</span><span class="token operator">></span> list<span class="token operator"><</span><span class="token operator">/</span>NavLink<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>NavLink activeClassName<span class="token operator">=</span><span class="token string">'demo'</span> to<span class="token operator">=</span><span class="token string">'/search/a/a/'</span><span class="token operator">></span> search<span class="token operator"><</span><span class="token operator">/</span>NavLink<span class="token operator">></span> <span class="token operator"><</span>hr <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route exact path<span class="token operator">=</span><span class="token string">'/list'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>List<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/search'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Search<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Redirect to<span class="token operator">=</span><span class="token string">'/list'</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="二级路由-一定不要严格匹配" tabindex="-1"><a class="header-anchor" href="#二级路由-一定不要严格匹配"><span>二级路由--一定不要严格匹配</span></a></h2><blockquote><h3 id="父组件" tabindex="-1"><a class="header-anchor" href="#父组件"><span>父组件</span></a></h3></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Component } from 'react'</span>
<span class="line">import './App.css'</span>
<span class="line">import { NavLink, Route, Redirect } from 'react-router-dom'</span>
<span class="line">import List from './components/List'</span>
<span class="line">import Search from './components/Search'</span>
<span class="line"></span>
<span class="line">export default class App extends Component {</span>
<span class="line"> render() {</span>
<span class="line"> return (</span>
<span class="line"> <div className="container"></span>
<span class="line"> <NavLink activeClassName='demo' to='/list'> list</NavLink></span>
<span class="line"> <NavLink activeClassName='demo' to='/search'> search</NavLink> <hr /></span>
<span class="line"> <Route path='/list' component={List} /></span>
<span class="line"> <Route path='/search' component={Search} /></span>
<span class="line"> <Redirect to='/list' /></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>二级路由地址</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Component } from 'react'</span>
<span class="line">import { NavLink, Route, Switch } from 'react-router-dom'</span>
<span class="line">import About from './About';</span>
<span class="line">import Message from './Message';</span>
<span class="line">export default class List extends Component {</span>
<span class="line"> render() {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <NavLink activeClassName='demo' to='/list/message'>goMessage</NavLink></span>
<span class="line"> <NavLink activeClassName='demo' to='/list/about'>goAbout</NavLink></span>
<span class="line"> <hr /></span>
<span class="line"></span>
<span class="line"> <Switch></span>
<span class="line"> <Route path='/list/message' component={Message} /></span>
<span class="line"> <Route path='/list/about' component={About} /></span>
<span class="line"> </Switch></span>
<span class="line"></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由传递参数" tabindex="-1"><a class="header-anchor" href="#路由传递参数"><span>路由传递参数</span></a></h2><div class="language-vb line-numbers-mode" data-highlighter="prismjs" data-ext="vb" data-title="vb"><pre class="language-vb"><code><span class="line"> <span class="token number">1</span><span class="token punctuation">.</span>params参数</span>
<span class="line"> 路由链接<span class="token punctuation">(</span>携带参数<span class="token punctuation">)</span>：<span class="token operator"><</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token comment">'/demo/test/tom/18'}>详情</Link></span></span>
<span class="line"> 注册路由<span class="token punctuation">(</span>声明接收<span class="token punctuation">)</span>：<span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">"/demo/test/:name/:age"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Test<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> 接收参数：this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params</span>
<span class="line"> <span class="token number">2</span><span class="token punctuation">.</span>search参数</span>
<span class="line"> 路由链接<span class="token punctuation">(</span>携带参数<span class="token punctuation">)</span>：<span class="token operator"><</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token comment">'/demo/test?name=tom&age=18'}>详情</Link></span></span>
<span class="line"> 注册路由<span class="token punctuation">(</span>无需声明，正常注册即可<span class="token punctuation">)</span>：<span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">"/demo/test"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Test<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> 接收参数：this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>search</span>
<span class="line"> 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析</span>
<span class="line"> <span class="token number">3</span><span class="token punctuation">.</span>state参数</span>
<span class="line"> 路由链接<span class="token punctuation">(</span>携带参数<span class="token punctuation">)</span>：<span class="token operator"><</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>pathname<span class="token punctuation">:</span><span class="token comment">'/demo/test',state:{name:'tom',age:18}}}>详情</Link></span></span>
<span class="line"> 注册路由<span class="token punctuation">(</span>无需声明，正常注册即可<span class="token punctuation">)</span>：<span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">"/demo/test"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Test<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> 接收参数：this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>state</span>
<span class="line"> 备注：刷新也可以保留住参数</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="路由带参数传值-params参数" tabindex="-1"><a class="header-anchor" href="#路由带参数传值-params参数"><span>路由带参数传值 --- params参数</span></a></h3><blockquote><p>父集路由</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"><Link to={`/list/message/${Obj.id}`}>跳转</Link></span>
<span class="line"><Route path='/list/message/:id' component={Message} /></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>子集路由</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"> const { id } = this.props.match.params</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="路由带参数传值-search参数" tabindex="-1"><a class="header-anchor" href="#路由带参数传值-search参数"><span>路由带参数传值 --- search参数</span></a></h3><blockquote><p>父集路由</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"><Link to={`/list/message/?id=${Obj.id}&title=${obj.title}`}>跳转</Link></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><p>子集路由</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> qs <span class="token keyword">from</span> <span class="token string">'querystring-es3'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span> search <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>location</span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span>title <span class="token punctuation">}</span> <span class="token operator">=</span> qs<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>search<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="路由带参数传值-state参数" tabindex="-1"><a class="header-anchor" href="#路由带参数传值-state参数"><span>路由带参数传值 --- state参数</span></a></h3><blockquote><h4 id="缺点-如果浏览器清除浏览器历史记录以后-有可能空置" tabindex="-1"><a class="header-anchor" href="#缺点-如果浏览器清除浏览器历史记录以后-有可能空置"><span>缺点： 如果浏览器清除浏览器历史记录以后，有可能空置</span></a></h4></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"><NavLink to={{ pathname:'/list/message',state:{id:Obj.id}}}>跳转</NavLink></span>
<span class="line"></span>
<span class="line">const { id } = this.props.location.state || {}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编程式导航" tabindex="-1"><a class="header-anchor" href="#编程式导航"><span>编程式导航</span></a></h2><h3 id="类式组件-history-api" tabindex="-1"><a class="header-anchor" href="#类式组件-history-api"><span>类式组件 history-API</span></a></h3><blockquote><p>两种模式：</p><p> replace跳转、push跳转</p><p>三种形式：</p><p> params传参、query传参、search传参</p></blockquote><p></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// 携带 params 参数</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/list/message/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/list/message/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 携带 query 参数</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/list/message?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/list/message?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 携带 state 参数</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/list/message</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span>id<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/list/message</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span>id<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//前进、后退、指定</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">goForward</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="函数式组件-navigate-跳转路由" tabindex="-1"><a class="header-anchor" href="#函数式组件-navigate-跳转路由"><span>函数式组件 <code><Navigate/></code>跳转路由</span></a></h3><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">{ path: '/', element: <Navigate to='/about' /> },</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import { useOutlet, useNavigate } from 'react-router-dom';</span>
<span class="line">const navigate = useNavigate()</span>
<span class="line">const element =useOutlet()</span>
<span class="line"></span>
<span class="line">function goDetail(id) {</span>
<span class="line"> navigate(`detail?id=${id}`)</span>
<span class="line"> </span>
<span class="line">}</span>
<span class="line"></span>
<span class="line"><button onClick={() => goDetail(Obj.id)}>跳转详情</button></span>
<span class="line"></span>
<span class="line">//最后使用{element} 来进行页面占位</span>
<span class="line">{element}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="函数式组件调用路由" tabindex="-1"><a class="header-anchor" href="#函数式组件调用路由"><span>函数式组件调用路由</span></a></h2><blockquote><h3 id="传统写法" tabindex="-1"><a class="header-anchor" href="#传统写法"><span>传统写法</span></a></h3></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React from 'react'</span>
<span class="line">import { Link, Route, Routes, Navigate } from 'react-router-dom'</span>
<span class="line">import About from './pages/about'</span>
<span class="line">import Home from './pages/home'</span>
<span class="line">export default function App() {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <h1> 我是App组件</h1></span>
<span class="line"> <Link to='/home'>goHome</Link></span>
<span class="line"> <Link to='/about'>goAbout</Link></span>
<span class="line"> {/* 注册路由 */}</span>
<span class="line"> <Routes></span>
<span class="line"> <Route path=`/home/${Obj.id}/${Obj.name}` element={<Home />}></Route></span>
<span class="line"> <Route path='/about' element={<About />}></Route></span>
<span class="line"> <Route path='/' element={<Navigate to='/about'/>}></Route></span>
<span class="line"> </Routes></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="外部调用的写法" tabindex="-1"><a class="header-anchor" href="#外部调用的写法"><span>外部调用的写法</span></a></h3></blockquote><p><strong>routes/index.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> About <span class="token keyword">from</span> <span class="token string">"../pages/about"</span></span>
<span class="line"><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">"../pages/home"</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Navigate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>About <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home/:id/:name'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Home <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Navigate to<span class="token operator">=</span><span class="token string">'/about'</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> element</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>App.js</strong></p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React from 'react'</span>
<span class="line">import { Link,useRoutes } from 'react-router-dom'</span>
<span class="line">import routes from './routes'</span>
<span class="line">export default function App() {</span>
<span class="line"> const element=useRoutes(routes)</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <h1> 我是App组件</h1></span>
<span class="line"> <Link to='/home'>goHome</Link></span>
<span class="line"> <Link to='/about'>goAbout</Link></span>
<span class="line"> {element}</span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="调用子集路由" tabindex="-1"><a class="header-anchor" href="#调用子集路由"><span>调用子集路由</span></a></h3><p><strong>routes/index.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> About <span class="token keyword">from</span> <span class="token string">"../pages/about"</span></span>
<span class="line"><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">"../pages/home"</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Navigate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span></span>
<span class="line"><span class="token keyword">import</span> News <span class="token keyword">from</span> <span class="token string">'../pages/components/News'</span></span>
<span class="line"><span class="token keyword">import</span> Message <span class="token keyword">from</span> <span class="token string">'../pages/components/Message'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>About <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'news'</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>News <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Message <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Home <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Navigate to<span class="token operator">=</span><span class="token string">'/about'</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> element</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="使用-outlet-组件进行占位-站在哪里-组件就先是在哪里" tabindex="-1"><a class="header-anchor" href="#使用-outlet-组件进行占位-站在哪里-组件就先是在哪里"><span>使用 <code> <Outlet/></code> 组件进行占位，站在哪里，组件就先是在哪里</span></a></h3><h3 id="to两中写法-about-news-或者-news" tabindex="-1"><a class="header-anchor" href="#to两中写法-about-news-或者-news"><span>to两中写法 <code>/about/news</code> 或者 <code>news</code></span></a></h3></blockquote><p><strong>about.jsx</strong></p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Fragment } from 'react'</span>
<span class="line">import { Link, Outlet } from 'react-router-dom'</span>
<span class="line">export default function About() {</span>
<span class="line"> return (</span>
<span class="line"> <Fragment></span>
<span class="line"> <hr/></span>
<span class="line"> <Link to='message'> goMessage</Link></span>
<span class="line"> <Link to='news'> goNews</Link></span>
<span class="line"> <Outlet/> //占位插槽</span>
<span class="line"> </Fragment></span>
<span class="line"> )</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="一般组件想使用-路由组件的api参数-withrouter" tabindex="-1"><a class="header-anchor" href="#一般组件想使用-路由组件的api参数-withrouter"><span>一般组件想使用 路由组件的API参数 -- withRouter</span></a></h2><blockquote><p>在导出这个组件的时候 包裹一层 withRouter函数即可</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> withRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name">Header</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'this.props一般组件'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div<span class="token operator">></span>这个是一个一般组件<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">withRouter</span><span class="token punctuation">(</span>Header<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="redux-基本使用" tabindex="-1"><a class="header-anchor" href="#redux-基本使用"><span>Redux 基本使用</span></a></h2><h3 id="类式组件" tabindex="-1"><a class="header-anchor" href="#类式组件"><span>类式组件</span></a></h3><blockquote><h3 id="精简版-102集异步" tabindex="-1"><a class="header-anchor" href="#精简版-102集异步"><span>精简版 102集异步</span></a></h3></blockquote><blockquote><h4 id="_1-去除count组件自身的状态" tabindex="-1"><a class="header-anchor" href="#_1-去除count组件自身的状态"><span>(1).去除Count组件自身的状态</span></a></h4><h4 id="_2-src下建立" tabindex="-1"><a class="header-anchor" href="#_2-src下建立"><span>(2).src下建立:</span></a></h4><p> -redux -store.js -count_reducer.js</p><h4 id="_3-store-js" tabindex="-1"><a class="header-anchor" href="#_3-store-js"><span>(3).store.js：</span></a></h4><p> 1).引入redux中的createStore函数，创建一个store 2).createStore调用时要传入一个为其服务的reducer 3).记得暴露store对象</p><h4 id="_4-count-reducer-js" tabindex="-1"><a class="header-anchor" href="#_4-count-reducer-js"><span>(4).count_reducer.js：</span></a></h4><p> 1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态 2).reducer有两个作用：初始化状态，加工状态 3).reducer被第一次调用时，是store自动触发的， 传递的preState是undefined, 传递的action是:{type:'@@REDUX/INIT_a.2.b.4}</p><h4 id="_5-在index-js中监测store中状态的改变-一旦发生改变重新渲染" tabindex="-1"><a class="header-anchor" href="#_5-在index-js中监测store中状态的改变-一旦发生改变重新渲染"><span>(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<!----></span></a></h4><p> 备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。</p></blockquote><p><strong>store.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> legacy_createStore <span class="token keyword">as</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span></span>
<span class="line"><span class="token keyword">import</span> countReducer <span class="token keyword">from</span> <span class="token string">'./count_reducer'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span>countReducer<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>count_reducer.js 文件</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> initState<span class="token operator">=</span><span class="token number">0</span> <span class="token comment">//初始化状态值</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">countReducer</span><span class="token punctuation">(</span><span class="token parameter">preState <span class="token operator">=</span> initState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'preState, action'</span><span class="token punctuation">,</span> preState<span class="token punctuation">,</span> action<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> action</span>
<span class="line"> <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">case</span> <span class="token string">'increment'</span><span class="token operator">:</span> <span class="token comment">//如果是加</span></span>
<span class="line"> <span class="token keyword">return</span> preState <span class="token operator">+</span> data</span>
<span class="line"> <span class="token keyword">case</span> <span class="token string">'dncrement'</span><span class="token operator">:</span> <span class="token comment">//如果是减</span></span>
<span class="line"> <span class="token keyword">return</span> preState <span class="token operator">-</span> data</span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span></span>
<span class="line"> <span class="token keyword">return</span> preState</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Count.jsx 组件中的代码</strong></p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Component } from 'react'</span>
<span class="line">import { Select, Button } from 'antd';</span>
<span class="line">// 用于获取Redux中获取的状态</span>
<span class="line">import store from '../../redux/store';</span>
<span class="line"></span>
<span class="line">export default class Count extends Component {</span>
<span class="line"> selectNumber = 1</span>
<span class="line"> // 加法</span>
<span class="line"> increment = () => {</span>
<span class="line"> store.dispatch({ type: 'increment', data: this.selectNumber * 1 })</span>
<span class="line"> }</span>
<span class="line"> // 减法</span>
<span class="line"> dncrement = () => {</span>
<span class="line"> store.dispatch({ type: 'dncrement', data: this.selectNumber * 1 })</span>
<span class="line"> }</span>
<span class="line"> // 奇数加</span>
<span class="line"> incrementIfOdd = () => {</span>
<span class="line"> if (store.getState() % 2 !== 0) {</span>
<span class="line"> store.dispatch({ type: 'increment', data: this.selectNumber * 1 })</span>
<span class="line"> }</span>
<span class="line"> }</span>
<span class="line"> // 异步加法</span>
<span class="line"> incrementAsync = () => {</span>
<span class="line"> setTimeout(() => {</span>
<span class="line"> store.dispatch({ type: 'increment', data: this.selectNumber * 1 })</span>
<span class="line"> }, 100);</span>
<span class="line"> }</span>
<span class="line"></span>
<span class="line"> render() {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <h1>Count的值为 {store.getState()}</h1></span>
<span class="line"> <Select defaultValue='1 ' style={{ width: 120, }} onChange={c => { this.selectNumber = c }}</span>
<span class="line"> options={[{ value: 1, label: 1, }, { value: 2, label: 2, }, { value: 3, label: 3, }]} /></span>
<span class="line"> <Button type='primary' onClick={this.increment} >加</Button></span>
<span class="line"> <Button type='primary' onClick={this.dncrement} >减</Button></span>
<span class="line"> <Button type='primary' onClick={this.incrementIfOdd} >奇数加</Button></span>
<span class="line"> <Button type='primary' onClick={this.incrementAsync} >异步加</Button></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>根目录下的index.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom/client'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'./index.css'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> reportWebVitals <span class="token keyword">from</span> <span class="token string">'./reportWebVitals'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./redux/store'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// redux 的简洁写法，调用subscrib，不会引起大面积的页面重新刷新，因为有react的diff算法</span></span>
<span class="line">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token function">reportWebVitals</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="类式组件-完整版" tabindex="-1"><a class="header-anchor" href="#类式组件-完整版"><span>类式组件-完整版</span></a></h3></blockquote><p>**用于定义名字的 constant.js 文件 **</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 该模块用于定义action 对象中的type变量名</span>
<span class="line"> */</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">INCREMENT</span> <span class="token operator">=</span> <span class="token string">'increment'</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">DECREMENT</span> <span class="token operator">=</span><span class="token string">'decrement'</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>**用于为组件生成action对象 count_action.js 文件 **</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 该文件专门为Count组件生成action对象</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">INCREMENT</span><span class="token punctuation">,</span> <span class="token constant">DECREMENT</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./constant"</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createIncrementAction</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">INCREMENT</span><span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createDecrementAction</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">DECREMENT</span><span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>用于书写count方法的文件 count_reducer.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token constant">INCREMENT</span><span class="token punctuation">,</span><span class="token constant">DECREMENT</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constant.js'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token number">0</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">countReducer</span><span class="token punctuation">(</span><span class="token parameter">preState <span class="token operator">=</span> initState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'preState, action'</span><span class="token punctuation">,</span> preState<span class="token punctuation">,</span> action<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> action</span>
<span class="line"> <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">case</span> <span class="token constant">INCREMENT</span><span class="token operator">:</span> <span class="token comment">//如果是加</span></span>
<span class="line"> <span class="token keyword">return</span> preState <span class="token operator">+</span> data</span>
<span class="line"> <span class="token keyword">case</span> <span class="token constant">DECREMENT</span><span class="token operator">:</span> <span class="token comment">//如果是减</span></span>
<span class="line"> <span class="token keyword">return</span> preState <span class="token operator">-</span> data</span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span></span>
<span class="line"> <span class="token keyword">return</span> preState</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>用于创建 Redux 实例 store.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> legacy_createStore <span class="token keyword">as</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span></span>
<span class="line"><span class="token keyword">import</span> countReducer <span class="token keyword">from</span> <span class="token string">'./count_reducer'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span>countReducer<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>组件调用</strong></p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Component } from 'react'</span>
<span class="line">import { Select, Button } from 'antd';</span>
<span class="line">// 用于获取Redux中获取的状态</span>
<span class="line">import store from '../../redux/store';</span>
<span class="line">import { createDecrementAction, createIncrementAction } from '../../redux/count_action'</span>
<span class="line"></span>
<span class="line">export default class Count extends Component {</span>
<span class="line"> selectNumber = 1</span>
<span class="line"> // 加法</span>
<span class="line"> increment = () => {</span>
<span class="line"> store.dispatch(createIncrementAction(this.selectNumber*1))</span>
<span class="line"> }</span>
<span class="line"> // 减法</span>
<span class="line"> dncrement = () => {</span>
<span class="line"> store.dispatch(createDecrementAction(this.selectNumber * 1))</span>
<span class="line"> }</span>
<span class="line"> // 奇数加</span>
<span class="line"> incrementIfOdd = () => {</span>
<span class="line"> if (store.getState() % 2 !== 0) {</span>
<span class="line"> store.dispatch(createIncrementAction(this.selectNumber * 1))</span>
<span class="line"> }</span>
<span class="line"> }</span>
<span class="line"> // 异步加法</span>
<span class="line"> incrementAsync = () => {</span>
<span class="line"> setTimeout(() => {</span>
<span class="line"> store.dispatch(createIncrementAction(this.selectNumber * 1))</span>
<span class="line"> }, 100);</span>
<span class="line"> }</span>
<span class="line"></span>
<span class="line"> render() {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <h1>Count的值为 {store.getState()}</h1></span>
<span class="line"> <Select defaultValue='1 ' style={{ width: 120, }} onChange={c => { this.selectNumber = c }}</span>
<span class="line"> options={[{ value: 1, label: 1, }, { value: 2, label: 2, }, { value: 3, label: 3, }]} /></span>
<span class="line"> <Button type='primary' onClick={this.increment} >加</Button></span>
<span class="line"> <Button type='primary' onClick={this.dncrement} >减</Button></span>
<span class="line"> <Button type='primary' onClick={this.incrementIfOdd} >奇数加</Button></span>
<span class="line"> <Button type='primary' onClick={this.incrementAsync} >异步加</Button></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>最后在index.js 中包裹起来</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// redux 的简洁写法，不会引起大面积的页面重新刷新，因为有react的diff算法</span></span>
<span class="line">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="类式组件-合并父子组件-简写形式" tabindex="-1"><a class="header-anchor" href="#类式组件-合并父子组件-简写形式"><span>类式组件-合并父子组件 简写形式</span></a></h3></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> createDecrementAction<span class="token punctuation">,</span> createIncrementAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../redux/count_action'</span></span>
<span class="line"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name">Count</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span></span>
<span class="line"> selectNumber <span class="token operator">=</span> <span class="token number">1</span></span>
<span class="line"> <span class="token comment">// 加法</span></span>
<span class="line"> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jia</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber<span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token comment">// 减法</span></span>
<span class="line"> <span class="token function-variable function">dncrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jian</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>h1<span class="token operator">></span>Count的值为<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Select defaultValue<span class="token operator">=</span><span class="token string">'1 '</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber <span class="token operator">=</span> c <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"> options<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">'primary'</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increment<span class="token punctuation">}</span> <span class="token operator">></span>加<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">'primary'</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>dncrement<span class="token punctuation">}</span> <span class="token operator">></span>减<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token parameter">state</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> state <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">jia</span><span class="token operator">:</span> createIncrementAction<span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">jian</span><span class="token operator">:</span> createDecrementAction</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">(</span>Count<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="函数式组件" tabindex="-1"><a class="header-anchor" href="#函数式组件"><span>函数式组件</span></a></h3><p><strong>index.ts页面</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> legacy_createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"redux"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">"./reducer"</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">legacy_createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>reducer.ts</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> initialState <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> initialState<span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> payload <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">case</span> type<span class="token operator">==</span><span class="token string">'123'</span><span class="token operator">:</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>state<span class="token punctuation">,</span> <span class="token operator">...</span>payload <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span></span>
<span class="line"> <span class="token keyword">return</span> state</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>main.js</strong> 外侧包裹一个 <code><Provider store={store}></code> 标签 让每个页面都可以获取store的值</p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import { Provider } from 'react-redux'</span>
<span class="line">import store from './store/index'</span>
<span class="line">ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(</span>
<span class="line"> <Provider store={store}></span>
<span class="line"> <BrowserRouter> {/* 路由模式 */}</span>
<span class="line"> <React.Suspense fallback={<div>Loading...</div>} > {/* 懒加载标签 */}</span>
<span class="line"> <App /></span>
<span class="line"> </React.Suspense></span>
<span class="line"> </BrowserRouter></span>
<span class="line"> </Provider ></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>home.tsx</strong> 调用数据</p><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span>num111<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span>state <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> num111<span class="token operator">:</span>state<span class="token punctuation">.</span>name</span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">//-------------------------------------</span></span>
<span class="line"><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>num111<span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="外侧如果不想包一个标签-可以直接使用-fragment-或者使用" tabindex="-1"><a class="header-anchor" href="#外侧如果不想包一个标签-可以直接使用-fragment-或者使用"><span>外侧如果不想包一个标签，可以直接使用 Fragment 或者使用<></span></a></h2><blockquote><p>Fragment 可以接收 key值，可以用来进行循环的渲染</p><p><> </> 空标签只能进行包裹但是没有任何作用</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Fragment } from 'react'</span>
<span class="line"></span>
<span class="line">render() {</span>
<span class="line"> return (</span>
<span class="line"> <Fragment key={1}></span>
<span class="line"> <Count /></span>
<span class="line"> <hr /></span>
<span class="line"> <Person/></span>
<span class="line"> </Fragment></span>
<span class="line"> )</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="错误边界" tabindex="-1"><a class="header-anchor" href="#错误边界"><span>错误边界</span></a></h2><blockquote><h3 id="理解" tabindex="-1"><a class="header-anchor" href="#理解"><span>理解：</span></a></h3></blockquote><p>错误边界：用来捕获后代组件错误，渲染出备用页面</p><blockquote><h3 id="特点" tabindex="-1"><a class="header-anchor" href="#特点"><span>特点：</span></a></h3></blockquote><p>只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误</p><blockquote><h3 id="使用方式" tabindex="-1"><a class="header-anchor" href="#使用方式"><span>使用方式：</span></a></h3></blockquote><p>getDerivedStateFromError配合componentDidCatch</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// 生命周期函数，一旦后台组件报错，就会触发</span></span>
<span class="line"><span class="token keyword">static</span> <span class="token function">getDerivedStateFromError</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 在render之前触发</span></span>
<span class="line"> <span class="token comment">// 返回新的state</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token function">componentDidCatch</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> info</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 统计页面的错误。发送请求发送到后台去</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件通信方式总结" tabindex="-1"><a class="header-anchor" href="#组件通信方式总结"><span>组件通信方式总结</span></a></h2><blockquote><h2 id="方式" tabindex="-1"><a class="header-anchor" href="#方式"><span>方式：</span></a></h2></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token function">props：</span></span>
<span class="line"> <span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span>children <span class="token function">props</span></span>
<span class="line"> <span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span>render props</span>
<span class="line"> 消息订阅<span class="token operator">-</span>发布：</span>
<span class="line"> pubs<span class="token operator">-</span>sub、event等等</span>
<span class="line"> 集中式管理：</span>
<span class="line"> redux、dva等等</span>
<span class="line"> <span class="token literal-property property">conText</span><span class="token operator">:</span></span>
<span class="line"> 生产者<span class="token operator">-</span>消费者模式</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h2 id="组件间的关系" tabindex="-1"><a class="header-anchor" href="#组件间的关系"><span>组件间的关系</span></a></h2></blockquote><div class="language-txt line-numbers-mode" data-highlighter="prismjs" data-ext="txt" data-title="txt"><pre class="language-txt"><code><span class="line"> 父子组件：props</span>
<span class="line"> 兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理</span>
<span class="line"> 祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(用的少)</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="function过程传参" tabindex="-1"><a class="header-anchor" href="#function过程传参"><span>Function过程传参</span></a></h2><blockquote><h4 id="params-传参" tabindex="-1"><a class="header-anchor" href="#params-传参"><span>Params 传参</span></a></h4></blockquote><blockquote><h4 id="search-传参" tabindex="-1"><a class="header-anchor" href="#search-传参"><span>Search 传参</span></a></h4></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSearchParams <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>search<span class="token punctuation">,</span> setsearch<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useSearchParams</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> search<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="设置-为src目录" tabindex="-1"><a class="header-anchor" href="#设置-为src目录"><span>设置@为Src目录</span></a></h2><blockquote><p>先安装一个包 <code>cnpm i - D @types/node</code>用来解决<code>path</code>报错</p></blockquote><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span></span>
<span class="line"><span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">'@vitejs/plugin-react'</span></span>
<span class="line"><span class="token keyword">import</span> path <span class="token keyword">from</span> <span class="token string">'path'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> resolve<span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> alias<span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">'@'</span><span class="token operator">:</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span><span class="token string">'./src'</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h2 id="输入-不能自动识别路径" tabindex="-1"><a class="header-anchor" href="#输入-不能自动识别路径"><span>输入 @/ 不能自动识别路径</span></a></h2><p>在<code>tsconfig.json</code> 中 添加如下代码</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"baseUrl"</span><span class="token operator">:</span> <span class="token string">"./"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string-property property">"paths"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"@/*"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"src/*"</span><span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="hook" tabindex="-1"><a class="header-anchor" href="#hook"><span>Hook</span></a></h2><blockquote><h5 id="uselocation-可以查看路由表信息" tabindex="-1"><a class="header-anchor" href="#uselocation-可以查看路由表信息"><span>useLocation() 可以查看路由表信息</span></a></h5></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">const currentRoute = useLocation() </span>
<span class="line">console.log(currentRoute)</span>
<span class="line"> // 结果 {pathname: '/comp2', search: '', hash: '', state: null, key: 'xnmozq4r'} </span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="设置-为src目录-1" tabindex="-1"><a class="header-anchor" href="#设置-为src目录-1"><span>设置@为Src目录</span></a></h2><blockquote><p>先安装一个包 <code>cnpm i - D @types/node</code>用来解决<code>path</code>报错</p></blockquote><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span></span>
<span class="line"><span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">'@vitejs/plugin-react'</span></span>
<span class="line"><span class="token keyword">import</span> path <span class="token keyword">from</span> <span class="token string">'path'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> resolve<span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> alias<span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">'@'</span><span class="token operator">:</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span><span class="token string">'./src'</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h2 id="输入-不能自动识别路径-1" tabindex="-1"><a class="header-anchor" href="#输入-不能自动识别路径-1"><span>输入 @/ 不能自动识别路径</span></a></h2><p>在<code>tsconfig.json</code> 中 添加如下代码</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"baseUrl"</span><span class="token operator">:</span> <span class="token string">"./"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string-property property">"paths"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"@/*"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"src/*"</span><span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由配置流程-带懒加载" tabindex="-1"><a class="header-anchor" href="#路由配置流程-带懒加载"><span>路由配置流程（带懒加载)</span></a></h2><blockquote><h3 id="router-js" tabindex="-1"><a class="header-anchor" href="#router-js"><span>router.js</span></a></h3></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> lazy <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Navigate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// import About from "../views/About";</span></span>
<span class="line"><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">"../views/Home"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> About <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"../views/About"</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// const Home = lazy(() => import("../views/Home"))</span></span>
<span class="line"><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Navigate to<span class="token operator">=</span><span class="token string">'/home'</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Home <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>About <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> routes</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="在main里面创建路由模式" tabindex="-1"><a class="header-anchor" href="#在main里面创建路由模式"><span>在main里面创建路由模式</span></a></h3></blockquote><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom/client'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'reset-css'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'@/assets/style/global.scss'</span></span>
<span class="line"><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line">ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> HTMLElement<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token comment">/* 严格模式 */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 路由模式 */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.Suspense</span></span> <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 懒加载标签 */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.Suspense</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="app-tsx" tabindex="-1"><a class="header-anchor" href="#app-tsx"><span>App.tsx</span></a></h3></blockquote><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"><span class="token keyword">import</span> Copm1 <span class="token keyword">from</span> <span class="token string">'./components/Comp1/inedx'</span></span>
<span class="line"><span class="token keyword">import</span> Comp2 <span class="token keyword">from</span> <span class="token string">'./components/Comp2'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRoutes<span class="token punctuation">,</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"><span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">useRoutes</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"> 我是APP组件</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Copm1</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Comp2</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/home<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">Go home</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/About<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">Go home</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token punctuation">{</span>element<span class="token punctuation">}</span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link label" href="https://github.com/shixindea/shixinde-notes/edit/main/React笔记/React 笔记.md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg class="edit-icon" viewbox="0 0 1024 1024"><g fill="currentColor"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></g></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 2914310412@qq.com">袁果锅</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/05_redux%E7%AC%94%E8%AE%B0.html" aria-label="4. 05_redux笔记.md"><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span>4. 05_redux笔记.md</span></div></a><a class="route-link auto-link next" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE%E6%B5%81%E7%A8%8B.html" aria-label="6. React 项目配置流程.md"><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span>6. React 项目配置流程.md</span></div></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!----><!--]--><!--]--></div>
<script type="module" src="/guoguo-notes/assets/app-Dx9bNbfq.js" defer></script>
</body>
</html>