深圳专业设计网站平台,深圳网络品牌推广公司,施工平台,电子邮箱怎么注册#x1f90d; 前端开发工程师、技术日更博主、已过CET6 #x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 #x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 #x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E… 前端开发工程师、技术日更博主、已过CET6 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》 前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到网站。 文章目录 核心概念基础用法动态路由嵌套路由 React Router 是一个用于在 React 应用程序中处理路由的库它允许你为不同的 URL 路径渲染不同的组件。以下是 React Router 的一些关键概念和用法
核心概念
路由器Routers BrowserRouter使用 HTML5 的历史 API 来保持 UI 和 URL 的同步。HashRouter使用 URL 的哈希部分来保持 UI 和 URL 的同步适用于不支持 HTML5 历史API的环境。 路由Routes Route最基本的路由组件它负责根据路径匹配并渲染对应的组件。Switch渲染第一个与当前路径匹配的 Route 或 Redirect。 导航Navigation Link用于在应用程序内部创建链接允许用户在不同页面间导航。NavLink一个特殊版本的 Link它会在匹配当前路径时为其添加样式属性。Redirect用于重定向将用户重定向到另一个路由。
基础用法
安装 React Router
npm install react-router-dom设置路由器
import { BrowserRouter as Router, Route, Switch } from react-router-dom;
const App () (RouterSwitchRoute exact path/ component{Home} /Route path/about component{About} /Route path/contact component{Contact} /// ...其他路由/Switch/Router
);使用 Link 组件进行导航
import { Link } from react-router-dom;
const Navbar () (navulliLink to/Home/Link/liliLink to/aboutAbout/Link/liliLink to/contactContact/Link/li/ul/nav
);定义组件
const Home () divHome Page/div;
const About () divAbout Page/div;
const Contact () divContact Page/div;动态路由
动态路由允许你在 URL 中包含可变的部分通常用于匹配特定的资源如用户ID。
Route path/user/:userId component{User} /在 User 组件中你可以通过 useParams 钩子获取 userId
import { useParams } from react-router-dom;
const User () {const { userId } useParams();return divUser ID: {userId}/div;
};嵌套路由
在 React Router 中你可以通过在父路由组件内部放置更多 Route 来创建嵌套路由。
const App () (RouterSwitchRoute path/users component{Users} /// ...其他路由/Switch/Router
);
const Users () (divh1Users/h1Route path/users/:userId component{User} //div
);以上是 React Router 的一些基础知识和用法。React Router 提供了强大的功能能够满足各种路由需求并且它的 API 设计简洁易于学习和使用。在实际项目中你可能还会使用到高级特性如路由守卫、代码分割等。
