嘉立创社区
发动态
综合 最新发布 最新回复
图文
列表
前言想象一下：你打开一个网站，从 “首页” 点到 “个人中心”，页面连个白屏都没有 —— 这不是魔法，是 单页应用（SPA） 的 “小心机”。而让 SPA 实现 “网址变、内容换” 的幕后大佬，就是今天要唠的 React Router。我今天以一个后台管理系统来全方位的拆解路由的细节~想要详细React Router资料可以在这里找到：reactrouter.com一、从 “多页翻书” 到 “单页变魔术”早年间的网站是 “多页应用”：点个链接跳转到新 HTML 文件，像翻书似的 “唰唰” 换页。但缺点很明显：加载慢、体验卡，就像翻一本 500 页的字典找个词，翻半天手都酸了。现在的 SPA 是 “单页魔术盒”：只有一个 HTML 文件，网址变了，只是把对应的 “组件” 塞进这个盒子里 —— 就像变魔术时从盒子里掏出不同道具，盒子本身根本不动。比如我写的这个后台管理系统：访问 http://localhost:5173/login → 塞进「登录组件」访问 http://localhost:5173/home → 塞进「首页组件」网址变，内容秒切，丝滑到像德芙广告～二、React Router：SPA 的 “导航指挥家”要实现这种 “秒切”，得请出react-router-dom这个 “指挥家”。它的核心成员有这些（结合我们的后台系统代码来看更爽）：首先你需要安装好react-router：就在我开头给的网址里面就可以找到哈！1. BrowserRouter：给应用 “装个导航系统”它是路由的 “容器”，相当于给整个应用装了个 “导航大脑”（用的是 HTML5 的 History API，所以网址长得像正常网址）。看App.jsx的开头： import { BrowserRouter, Routes, Route } from 'react-router-dom' export default function App() { return ( <BrowserRouter> {/* 所有路由配置都得包在它里面 */} <Routes> {/* 这里塞各种路由规则 */} </Routes> </BrowserRouter> ) } 2. Routes + Route：给 “组件” 贴 “网址标签”Routes是 “路由出口”，Route是 “网址→组件” 的标签贴。比如我们的后台系统，给 「登录页」「首页」 贴标签： <Routes> {/* 根路径直接跳转到登录页 */} <Route path="/" element={<Navigate to="/login" />} /> {/* 访问/login → 显示Login组件（就是我们写的登录界面） */} <Route path="/login" element={<Login />} /> {/* 访问/home → 显示Home组件（首页），同时它是二级路由的容器 */} <Route path="/home" element={<Home />}> {/* 二级路由：/home/class → 显示Class组件 */} <Route path="class" element={<Class />} /> {/* 二级路由：/home/leetcode → 显示LeetCode组件 */} <Route path="leetcode" element={<LeetCode />} /> </Route> {/* 404页面：匹配不到的网址都显示这个 */} <Route path="*" element={<h2>NOT FOUND</h2>} /> </Routes> 登录首页：点击登录（自动进入/home/class）：像不像给每个组件发了张 “网址门票”？拿着/login门票，就能进登录页的门？机-会技术大厂，前端-后端-测试，新一线和一二线城市等地均有机-会，感兴趣可以试试。待遇和稳定性都不错~3. Outlet：二级路由的 “展示窗口”首页Home是个 “大容器”，里面要放class和leetcode这些 “子页面”——Outlet就是这个 “子页面展示窗口”。看Home.jsx的代码： import { Outlet, Link } from 'react-router-dom' export default function Home() { return ( <div className="home"> <header>后台管理系统</header> <main className="body"> <aside> {/* 侧边栏导航，点了跳转到二级路由 */} <li><Link to="/home/class">课程</Link></li> <li><Link to="/home/leetcode">算法</Link></li> </aside> <main className="content"> {/* 二级路由的内容就显示在这里！ */} <Outlet /> </main> </main> </div> ) } 点击算法进入/home/leetcode：Outlet就像电视屏幕，点 “课程” 就播 《课程频道》，点 “算法” 就切 《LeetCode 频道》。4. Link：SPA 的 “无痛跳转链接”传统的<a>标签跳转是 “翻页”，Link是 “换内容”—— 点它网址变，但页面不刷新，就像遥控器换台。比如首页侧边栏的导航： <Link to="/home/class">课程</Link> 5. useNavigate：“编程式跳转” 的魔法棒有时候需要 “代码触发跳转”（比如登录成功后自动跳首页），这时候useNavigate就派上用场了。看我们的Login.jsx： import { useNavigate } from 'react-router-dom' export default function Login() { const navigate = useNavigate() // 拿到跳转函数 const login = () => { // 登录逻辑... navigate('/home') // 登录成功，跳转到首页！ } return ( <div className="login"> <input placeholder="账号" /> <input placeholder="密码" /> <button onClick={login}>登录</button> </div> ) } 点登录前：点登录后：点 “登录” 按钮，navigate('/home')一执行，网址直接切到首页，比外卖小哥送餐还快～三、总结：React Router 就是 SPA 的 “导航全家桶”把这些成员凑一起，我们的后台系统就活了：打开网站，/自动跳/login → 显示登录界面（带输入框和绿色登录按钮）；点 “登录”，useNavigate跳/home → 显示首页（带侧边栏）；点侧边栏 “课程”，Link跳/home/class → Outlet显示课程页面；输错网址，直接显示NOT FOUND → 404 页面。是不是感觉 React Router 像个 “全能导航员”？既管网址匹配，又管页面切换，还能代码跳转 —— 有了它，SPA 才能像 “魔术盒” 一样，变内容比变魔术还快！结语说到底，React Router 就是单页应用的 “流量控制器”，它用极简的配置和灵活的 API，让我们的后台管理系统实现了 “网址变、组件换” 的丝滑体验。从登录页到首页，从一级路由到二级路由，没有烦人的页面刷新，只有行云流水的内容切换。路由其实不难，需要多理解，掌握这些核心用法，你也能轻松搭建出结构清晰、体验流畅的 SPA 应用。下次再遇到路由相关的需求，不妨拿出这些 “导航法宝”，让你的项目像后台管理系统一样，在路由的世界里畅通无阻。现在就用我的例子敲代码吧！——转载自：风止何安啊
从 “翻页书” 到 “魔术盒”：React 路由凭啥如此丝滑？
开源硬件平台
typec 好使了（好使了=功能正常，没有问题）
之前功能完全不能用，感谢 “小Q” 指出不能接两条CC，我切断了一根CC线。 另外还有一个坑。 因为开始想的是用这个FPCtypec作为一段导线用的，以为直连就行了。然而当两个公头背对背的时候，直连的线就变成A1-A12’；A2-A11' 方向颠倒了。直通的意义应该是这边A1进到另一测应该也是A1'才对，还好这是FPC，只要旋转一圈焊接就行了。 所以现在好使了，不过这种FPC排线拧绕的方式感觉不好看。本来做这个就是想代替两条CC线又长又绕的。现在线短了，但还是绕。大家有没有什么好点子，能让这块看起来干净利索儿的？
开源硬件平台
开源项目：EDA-SuperBear智能熊\n\n简介：基于ESP32S3打造的小智LLM大模型机器熊，通过LLM完成六舵机控制\n\n开源链接：[https://oshwhub.com/course-examples/eda-robot-max]\n#ESP8266/32# #AI视觉# #WiFi/以太网#
开源硬件平台
开源项目：AI陪伴虚拟宠物虚拟人数字生命盒
简介：本项目采用ESP32-S作为主控，无线联网调用AI大模型实现智能语音对话，利用串口屏显示时间、虚拟人物或宠物动态图和暖心文字，使用立创EDA设计3D打印外壳。另外适配SD卡槽，可读取播放卡内内容。 开源链接：https://oshwhub.com/qiuzhihhq/ai-digital-life-box #DIY设计# #嘉立创PCB# #嘉立创3D打印# #嘉立创免费3D打印# #ESP8266/32#
开源硬件平台
开源项目：ESP32+WS2812b+WLED的节日圣诞树\n\n简介：该项目使用ESP32主控芯片，通过开源的WLED实现对WS2812B灯珠的控制，实现圣诞的节日彩灯，具体的效果可以参考B站演示\n\n开源链接：[https://oshwhub.com/ywusmile/ji-yu-ws2812-de-mi-ni-sheng-dan-shu-wy]\n#RISC-V# #DIY设计# #消费电子#
开源硬件平台
电流环转串口
请教一下各位大佬，有设备的通讯接口是电流环的，我想通过电脑的串口来接，有没有办法？
开源硬件平台
关于数字电子秤的制作
关于数字电子秤的制作用 HX711有电路图吗
开源硬件平台
抄板、改板及打样 悬赏3万元
#技术干货# #嘉立创PCB# 寻求有经验的硬件工程师进行主板、显卡板、电源板的抄板、改板及打样工作。项目包括两个主板、一个电源板和一个显卡板的设计与优化，悬赏3万元，欢迎有相关经验的专业人士联系我！ fuym9907013(vx)
开源硬件平台
大家好，我是小悟。想象一下你去游乐园，买了一张通票（登录），然后就可以玩所有项目（访问各个系统），不用每个项目都重新买票（重新登录）。这就是单点登录（SSO）的精髓！SSO的日常比喻普通登录：像去不同商场，每个都要查会员卡单点登录：像微信扫码登录，一扫全搞定令牌：像游乐园手环，戴着就能证明你买过票下面用代码来实现这个"游乐园通票系统"：代码实现：简易SSO系统 import java.util.*; // 用户类 - 就是我们这些想玩项目的游客 class User { private String username; private String password; public User(String username, String password) { this.username = username; this.password = password; } // getters 省略... } // 令牌类 - 游乐园手环 class Token { private String tokenId; private String username; private Date expireTime; public Token(String username) { this.tokenId = UUID.randomUUID().toString(); this.username = username; // 令牌1小时后过期 - 游乐园晚上要关门的！ this.expireTime = new Date(System.currentTimeMillis() + 3600 * 1000); } public boolean isValid() { return new Date().before(expireTime); } // getters 省略... } // SSO认证中心 - 游乐园售票处 class SSOAuthCenter { private Map<String, Token> validTokens = new HashMap<>(); private Map<String, User> users = new HashMap<>(); public SSOAuthCenter() { // 预先注册几个用户 - 办了年卡的游客 users.put("zhangsan", new User("zhangsan", "123456")); users.put("lisi", new User("lisi", "abcdef")); } // 登录 - 买票入场 public String login(String username, String password) { User user = users.get(username); if (user != null && user.getPassword().equals(password)) { Token token = new Token(username); validTokens.put(token.getTokenId(), token); System.out.println(username + " 登录成功！拿到游乐园手环：" + token.getTokenId()); return token.getTokenId(); } System.out.println("用户名或密码错误！请重新买票！"); return null; } // 验证令牌 - 检查手环是否有效 public boolean validateToken(String tokenId) { Token token = validTokens.get(tokenId); if (token != null && token.isValid()) { System.out.println("手环有效，欢迎继续玩耍！"); return true; } System.out.println("手环无效或已过期，请重新登录！"); validTokens.remove(tokenId); // 清理过期令牌 return false; } // 登出 - 离开游乐园 public void logout(String tokenId) { validTokens.remove(tokenId); System.out.println("已登出，欢迎下次再来玩！"); } } // 业务系统A - 过山车 class SystemA { private SSOAuthCenter authCenter; public SystemA(SSOAuthCenter authCenter) { this.authCenter = authCenter; } public void accessSystem(String tokenId) { System.out.println("=== 欢迎来到过山车 ==="); if (authCenter.validateToken(tokenId)) { System.out.println("过山车启动！尖叫声在哪里！"); } else { System.out.println("请先登录再玩过山车！"); } } } // 业务系统B - 旋转木马 class SystemB { private SSOAuthCenter authCenter; public SystemB(SSOAuthCenter authCenter) { this.authCenter = authCenter; } public void accessSystem(String tokenId) { System.out.println("=== 欢迎来到旋转木马 ==="); if (authCenter.validateToken(tokenId)) { System.out.println("木马转起来啦！找回童年记忆！"); } else { System.out.println("请先登录再玩旋转木马！"); } } } // 测试我们的SSO系统 public class SSODemo { public static void main(String[] args) { // 创建认证中心 - 游乐园大门 SSOAuthCenter authCenter = new SSOAuthCenter(); // 张三登录 String token = authCenter.login("zhangsan", "123456"); if (token != null) { // 拿着同一个令牌玩不同项目 SystemA systemA = new SystemA(authCenter); SystemB systemB = new SystemB(authCenter); systemA.accessSystem(token); // 玩过山车 systemB.accessSystem(token); // 玩旋转木马 // 登出 authCenter.logout(token); // 再尝试访问 - 应该被拒绝 systemA.accessSystem(token); } // 测试错误密码 authCenter.login("lisi", "wrongpassword"); } } 运行结果示例： zhangsan 登录成功！拿到游乐园手环：a1b2c3d4-e5f6-7890-abcd-ef1234567890 === 欢迎来到过山车 === 手环有效，欢迎继续玩耍！ 过山车启动！尖叫声在哪里！ === 欢迎来到旋转木马 === 手环有效，欢迎继续玩耍！ 木马转起来啦！找回童年记忆！ 已登出，欢迎下次再来玩！ === 欢迎来到过山车 === 手环无效或已过期，请重新登录！ 请先登录再玩过山车！ 用户名或密码错误！请重新买票！ 总结一下：单点登录就像：一次认证，处处通行 🎫不用重复输入密码 🔑安全又方便 👍好的SSO系统就像好的游乐园管理，既要让游客玩得开心，又要确保安全！机会技术大厂，前端-后端-测试，新一线和一二线城市等地均有机-会，感兴趣可以试试。待遇和稳定性都不错~您的一键三连，是我更新的最大动力，谢谢山水有相逢，来日皆可期，谢谢阅读，我们再会——转载自：悟空码字
单点登录：一次登录，全网通行
开源硬件平台
什么，CH340G芯片可以当做数字量输入输出监测控制？什么，还不用单片机编程，串口助手直接可用？
简介：本项目基于CH340G芯片，除USB转TTL功能外，还可+5V和+3.3V电平切换以及供电，此外将DTR,RTS,CTS,DSR,RI,DCD通信接口作为普通数字IO端口，可由串口助手或上位机监测控制。 #DIY设计# #开源硬件平台# 感兴趣可看：https://oshwhub.com/qiuzhihhq/digital-io-and-usb-to-ttl
开源硬件平台
那位大佬可以设计一款DC-DC Buck-Boost 输入电压8V-60V输出电压24V（可以通过电阻调其他电压）输出电流60A（自适应输出）原来图和PCB文件，可以设计的私聊
开源硬件平台
EDA对新手很有帮助。。但是，别再嘬了。。
V2到V3数据隔离就强制卡掉一批人。软件持续性不强，卡掉一批人。BUG一大堆再卡一批。画板子重要的是啥？稳定啊！！三天两头出问题，谁敢正式用起来，顶天都是学生再玩啊。
开源硬件平台
开源硬件平台
烧不进去代码，有佬知道这是为什么吗？（硬件部分没问题的 ）
开源硬件平台
求大佬指教
图中的板子的U15 (usb下面) 是什么型号的元件？ 总共10个脚，上下各4个，左右各1个。 看着像滤波器，但是一直找不到具体型号[衰]
开源硬件平台
开源100W反激电源，https://oshwhub.com/qiaomueda/eg1252l-f
#DIY设计# #技术干货#
开源硬件平台
嘉立创社区年末盛会｜2025内容大赏正式启动！
🎉 各位社区玩家，是时候展示你这一年的硬核成果了！ #2025内容大赏# 12月15日起至1月15日，等你来秀！ 🌟 三大主题，任你发挥 1️⃣ #2025年度项目秀# —— 从创意到成品，全流程记录你的杰作 2️⃣ #2025年度踩坑日记# —— 分享实战难题与解决智慧 3️⃣ #2025年度测评# —— 评荐年度爱用元器件/工具，助人种草or避坑 🏆 重磅奖励 金奖（1名）500元京东卡、银奖（3名）200元京东卡、铜奖（5名）100元京东卡！ 评选综合内容质量、社区互动与官方评审，公平又有料！ 📌 规则提醒：单帖限参与一个主题，但可多发帖参与多主题。 速将你的年度力作发布至社区，标注对应话题，争当2025创作之星！
开源硬件平台
开源项目：8bit街机_桌面机器人\n\n简介：一款外观可爱的桌面机器人摆件，参考的荒野乱斗8bit的角色\n\n开源链接：[https://oshwhub.com/liu_97/8bit-arcade-desktop-robot]\n#Arduino# #ESP8266/32# #DIY设计#
开源硬件平台
反激电源
原变压器是带中间抽头的，但是都是悬空的，后面的的输出是有正负电压的，可以控制输出下面四组电压（12.35v,-7.15v），（10v，-4.75v)，（9.3v，-4v）（9v，-3.7v），输入端的电路我不太清楚，输出端的就是图中的，可是我仿真频率10k，占空比30%，输出的电压是（2.4v，-2.4v）有大佬能分析一下原理吗，是不是我接错了。
开源硬件平台
usb5807芯片的hub 电路板已经设计完，电脑识别不到usb3.0协议 #嘉立创PCB# #DIY设计#
开源硬件平台
开源硬件平台
去官网查看
优质硬件创作分享平台
推荐话题 换一批
#DIY设计#
#嘉立创PCB#
#嘉立创3D打印#
#嘉立创免费3D打印#
#技术干货#
#ESP8266/32#
#STM单片机#
#高校动态#
查看更多热门话题
打赏记录
激励规则
服务时间：周一至周六 9::00-18:00 · 联系地址：中国·深圳（福田区商报路奥林匹克大厦27楼） · 媒体沟通：pr@jlc.com · 集团介绍
移动社区
联系我们