HoRain云--React 路由-北京尧图网络

HoRain云小助手个人主页个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、实践案例助您精通 docker。《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍安装 React Router基本用法1. 创建基础路由组件实例2. 设置路由实例嵌套路由实例实例实例实例动态路由实例实例404 页面实例小结React 路由通常使用 react-router 库来实现它是一个功能强大的库用于在 React 应用程序中实现客户端路由。以下是关于如何在 React 中使用 React Router 的详细说明安装 React Router首先你需要安装 react-router-dom 包这是用于在浏览器环境中实现路由的包。npm install react-router-dom基本用法以下是使用 React Router 设置基本路由的步骤和示例代码。1. 创建基础路由组件首先创建一些简单的组件它们将被路由渲染。实例import React from react;const Home () {return h2Home/h2;};export default Home;// About.jsimport React from react;const About () {return h2About/h2;};export default About;// Contact.jsimport React from react;const Contact () {return h2Contact/h2;};export default Contact;2. 设置路由在你的主应用组件中使用 react-router-dom 的组件来设置路由。实例import React from react;import ReactDOM from react-dom/client;import {BrowserRouter as Router,Routes,Route,Link} from react-router-dom;import Home from ./Home;import About from ./About;import Contact from ./Contact;const App () {return (RouterdivnavulliLink to/Home/Link/liliLink to/aboutAbout/Link/liliLink to/contactContact/Link/li/ul/navRoutesRoute path/ element{Home /} /Route path/about element{About /} /Route path/contact element{Contact /} //Routes/div/Router);};const root ReactDOM.createRoot(document.getElementById(root));root.render(App /);嵌套路由React Router 允许你创建嵌套路由这样可以在一个组件内渲染更多的路由。实例// Dashboard.jsimport React from react;import { Link, Outlet } from react-router-dom;const Dashboard () {return (divh2Dashboard/h2navulliLink toprofileProfile/Link/liliLink tosettingsSettings/Link/li/ul/navOutlet //div);};export default Dashboard;实例// Profile.jsimport React from react;const Profile () {return h2Profile/h2;};export default Profile;实例// Settings.jsimport React from react;const Settings () {return h2Settings/h2;};export default Settings;在主应用组件中设置嵌套路由实例import React from react;import ReactDOM from react-dom/client;import {BrowserRouter as Router,Routes,Route,Link} from react-router-dom;import Home from ./Home;import About from ./About;import Contact from ./Contact;import Dashboard from ./Dashboard;import Profile from ./Profile;import Settings from ./Settings;const App () {return (RouterdivnavulliLink to/Home/Link/liliLink to/aboutAbout/Link/liliLink to/contactContact/Link/liliLink to/dashboardDashboard/Link/li/ul/navRoutesRoute path/ element{Home /} /Route path/about element{About /} /Route path/contact element{Contact /} /Route path/dashboard element{Dashboard /}Route pathprofile element{Profile /} /Route pathsettings element{Settings /} //Route/Routes/div/Router);};const root ReactDOM.createRoot(document.getElementById(root));root.render(App /);动态路由可以在路径中包含动态参数。实例// User.jsimport React from react;import { useParams } from react-router-dom;const User () {const { userId } useParams();return h2User ID: {userId}/h2;};export default User;在主应用组件中设置动态路由实例import React from react;import ReactDOM from react-dom/client;import {BrowserRouter as Router,Routes,Route,Link} from react-router-dom;import Home from ./Home;import About from ./About;import Contact from ./Contact;import Dashboard from ./Dashboard;import Profile from ./Profile;import Settings from ./Settings;import User from ./User;const App () {return (RouterdivnavulliLink to/Home/Link/liliLink to/aboutAbout/Link/liliLink to/contactContact/Link/liliLink to/dashboardDashboard/Link/liliLink to/user/1User 1/Link/liliLink to/user/2User 2/Link/li/ul/navRoutesRoute path/ element{Home /} /Route path/about element{About /} /Route path/contact element{Contact /} /Route path/dashboard element{Dashboard /}Route pathprofile element{Profile /} /Route pathsettings element{Settings /} //RouteRoute path/user/:userId element{User /} //Routes/div/Router);};const root ReactDOM.createRoot(document.getElementById(root));root.render(App /);404 页面可以使用 React Router 提供的 Navigate 组件来实现 404 页面重定向。实例import React from react;import ReactDOM from react-dom/client;import {BrowserRouter as Router,Routes,Route,Link,Navigate} from react-router-dom;import Home from ./Home;import About from ./About;import Contact from ./Contact;import Dashboard from ./Dashboard;import Profile from ./Profile;import Settings from ./Settings;import User from ./User;const NotFound () {return h2404 Page Not Found/h2;};const App () {return (RouterdivnavulliLink to/Home/Link/liliLink to/aboutAbout/Link/liliLink to/contactContact/Link/liliLink to/dashboardDashboard/Link/liliLink to/user/1User 1/Link/liliLink to/user/2User 2/Link/li/ul/navRoutesRoute path/ element{Home /} /Route path/about element{About /} /Route path/contact element{Contact /} /Route path/dashboard element{Dashboard /}Route pathprofile element{Profile /} /Route pathsettings element{Settings /} //RouteRoute path/user/:userId element{User /} /Route path* element{Navigate to/ replace /} //Routes/div/Router);};const root ReactDOM.createRoot(document.getElementById(root));root.render(App /);小结通过使用 React Router你可以轻松地在 React 应用中实现路由功能包括基本路由、嵌套路由、动态路由以及 404 页面等。通过这种方式你可以创建一个功能强大且用户友好的单页应用程序 (SPA)。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧

HoRain云--React 路由

相关推荐

FossFLOW图标系统深度解析：构建专业技术架构图的高效方案

SRC漏洞平台实战指南：从入门到精通的挖洞路径与技巧

袁东申论大作文模板|万能|框架

更多资讯

TypePHP编译器API参考：程序化调用PHP AOT编译器的完整指南

React Admin 实时数据提供者（Realtime Data Provider）接入完整指南：方法签名、内置适配器与自定义实现

VitePress 默认主题 Layout 指南：深入理解 doc、page、home 与自定义布局

Weex 鸿蒙化实践：js-base64 纯 JS 编解码库在 WebSceneAPI 中的集成与使用指南

ARIS 工作流总览：从 idea 到 paper 的 13 条 pipeline 如何一次看全

security-audit-skill伴生文件精读：Universal moves与Validation rules两大板块

今日更新

OneUptime 自定义探针（Custom Probe）部署实战：私网监控、代理配置与断连排障全指南

大众TL52625前端框架材料要求详解：从性能测试到落地执行

TiXL 浮点运算算子库 Lib.numbers.float 完全指南：44 个算子的参数详解、源码原理与实战串联

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？