景安网站备案查询,众筹网站开发成本,东莞seo网站制作报价,青岛嘎嘎随着单页面应用#xff08;SPA#xff09;已经成为主流。React 作为最流行的前端框架之一#xff0c;提供了强大的路由管理工具 react-router-dom#xff0c;帮助开发者轻松实现页面导航和传参。本文将详细介绍如何使用 react-router-dom 构建路由导航、传参以及嵌套路由的…随着单页面应用SPA已经成为主流。React 作为最流行的前端框架之一提供了强大的路由管理工具 react-router-dom帮助开发者轻松实现页面导航和传参。本文将详细介绍如何使用 react-router-dom 构建路由导航、传参以及嵌套路由的实现。
1. 构建路由导航
1.1 创建路由实例
在 React 项目中通常会在 src 目录下创建一个 router 文件夹来管理路由。我们可以使用 react-router-dom 提供的 createBrowserRouter 或 createHashRouter 方法来创建路由实例。
createBrowserRouter使用 HTML5 的 history API 来实现路由URL 看起来更干净例如http://example.com/home。createHashRouter使用 URL 的 hash 部分来实现路由例如http://example.com/#/home。
import { createBrowserRouter } from react-router-dom;const router createBrowserRouter([{path: /,element: Home /,},{path: /login,element: Login /,},{path: /article,element: Article /,},
]);export default router;1.2 嵌套路由
在 react-router-dom 中可以通过 children 属性来配置嵌套路由。嵌套路由允许我们在父路由下定义子路由从而实现更复杂的页面结构。
const router createBrowserRouter([{path: /,element: Layout /,children: [{path: home,element: Home /,},{path: about,element: About /,},],},
]);1.3 路由导航
在 React 中有两种主要的方式来实现路由导航声明式导航 和 编程式导航。
1.3.1 声明式导航
使用 Link 组件可以实现声明式导航。Link 组件会渲染成一个 a 标签点击后会跳转到指定的路由。
import { Link } from react-router-dom;const Login () {return (divh1登录页/h1Link to/article文章页/Link/div);
};- 思考为啥不用a标签
a标签每次全部刷新页面并且需要重新挂载组件对状态useState登需要重置 每次导航都会重新加载所有资源如 JavaScript、CSS 等即使这些资源在前一个页面已经加载过 无法直接支持动态路由如 /user/:idlink标签正好弥补上面缺陷适合单页面Spa应用。 自动与路由库如 React Router集成支持浏览器的前进和后退功能同时更新 URL 和历史记录 只有必要的部分如新路由对应的组件会被加载减少了不必要的网络请求和资源消耗 点击 组件只会更新当前页面的部分内容通常是路由对应的组件而不会重新加载整个页面。这使得无缝地在不同页面之间切换
1.3.2 编程式导航
使用 useNavigate 钩子可以实现编程式导航。useNavigate 返回一个函数调用该函数并传入目标路径即可实现导航。
import { useNavigate } from react-router-dom;const Login () {const navigate useNavigate();return (divh1登录页/h1button onClick{() navigate(/article)}文章页/button/div);
};2. 路由传参
在 React 路由中常见的传参方式有两种searchParams 传参 和 params 传参。
2.1 searchParams 传参
searchParams 传参是通过 URL 的查询字符串来传递参数的。我们可以使用 useSearchParams 钩子来获取和设置查询参数。
import { useNavigate } from react-router-dom;const Login () {const navigate useNavigate();return (divh1登录页/h1button onClick{() navigate(/article?id1namezs)}searchParams 传参/button/div);
};在目标组件中可以使用 useSearchParams 来获取传递的参数
import { useSearchParams } from react-router-dom;const Article () {const [searchParams] useSearchParams();const id searchParams.get(id);const name searchParams.get(name);return (divh1文章页/h1pID: {id}/ppName: {name}/p/div);
};2.2 params 传参
params 传参是通过 URL 的动态段来传递参数的。首先需要在路由配置中定义动态段然后在导航时传递参数。
2.2.1 路由配置
const router createBrowserRouter([{path: /article/:id/:name,element: Article /,},
]);2.2.2 导航传参
import { useNavigate } from react-router-dom;const Login () {const navigate useNavigate();return (divh1登录页/h1button onClick{() navigate(/article/1001/jack)}params 传参/button/div);
};2.2.3 获取参数
在目标组件中可以使用 useParams 钩子来获取传递的参数
import { useParams } from react-router-dom;const Article () {const { id, name } useParams();return (divh1文章页/h1pID: {id}/ppName: {name}/p/div);
};3. 嵌套路由与 Outlet /
在嵌套路由中父路由组件需要使用 Outlet / 组件作为子路由的占位符。当导航到子路由时Outlet / 会被替换为对应的子路由组件。
import { Outlet } from react-router-dom;const Layout () {return (divh1布局页/h1Outlet //div);
};在路由配置中Layout 组件作为父路由Home 和 About 作为子路由
const router createBrowserRouter([{path: /,element: Layout /,children: [{path: home,element: Home /,},{path: about,element: About /,},],},
]);4. 重定向与 redirect 参数
在某些场景下用户可能会尝试访问需要登录的页面但此时用户尚未登录。为了提升用户体验我们可以在用户登录后将其重定向回原本想要访问的页面。为了实现这一功能我们可以在 URL 中添加 redirect 查询参数记录用户原本想要访问的页面。
4.1 添加 redirect 参数
在用户访问需要登录的页面时我们可以通过编程式导航将用户重定向到登录页面并在 URL 中添加 redirect 参数记录原本要访问的页面。
import { useNavigate } from react-router-dom;const ProtectedPage () {const navigate useNavigate();const handleAccess () {const isLoggedIn false; // 假设用户未登录if (!isLoggedIn) {navigate(/login?redirect${encodeURIComponent(/protected-page)});}};return (divh1受保护的页面/h1button onClick{handleAccess}访问受保护页面/button/div);
};4.2 登录后重定向
在登录页面中我们可以通过 useSearchParams 获取 redirect 参数并在用户成功登录后将其重定向回原本想要访问的页面。
import { useSearchParams, useNavigate } from react-router-dom;const Login () {const [searchParams] useSearchParams();const navigate useNavigate();const redirect searchParams.get(redirect) || /;const handleLogin () {// 假设登录成功navigate(redirect);};return (divh1登录页/h1button onClick{handleLogin}登录/button/div);
};总结
通过 react-router-dom我们可以轻松实现 React 应用中的路由导航、传参以及嵌套路由。Link 和 useNavigate 提供了灵活的导航方式而 useSearchParams 和 useParams 则帮助我们处理路由传参。Outlet / 组件为嵌套路由提供了便捷的占位符功能。此外通过 redirect 参数我们可以在用户登录后将其重定向回原本想要访问的页面从而提升用户体验。掌握这些工具和技巧能够帮助我们构建更加复杂和高效的单页面应用。
