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 道阻且长,行则将至,让我们一起加油吧