1. react router 简介
react router 是一个用于在 react 应用程序中处理路由的库。它允许您的应用程序在不同的组件和视图之间导航，而无需重新加载整页，从而实现无缝的用户体验。
2. 基本设置
首先安装react-router-dom：
npm install react-router-dom
使用 browserrouter、routes 和 route 设置基本路由：
import react from 'react';import { browserrouter as router, routes, route, link } from 'react-router-dom';const home = () => home
;const about = () => about
;const app = () => { return ( <route path="/" element={} /> <route path="/about" element={} /> );};export default app;
3. 嵌套路由
对于更复杂的应用程序，您可以嵌套路由。以下是如何在父组件中设置嵌套路由：
import react from 'react';import { browserrouter as router, routes, route, link } from 'react-router-dom';const dashboard = () => dashboard home
;const profile = () => your profile
;const dashboardlayout = () => { return ( <route path="/" element={} /> <route path="profile" element={} /> );};const app = () => { return ( <route path="/dashboard/*" element={} /> );};export default app;
4. 动态路由
动态路由允许您在 url 中传递参数。以下是定义和访问动态路线的方法：
import { useparams } from 'react-router-dom';const user = () => { const { id } = useparams(); return user id: {id}
;};const app = () => { return ( <route path="/user/:id" element={} /> );};export default app;
5. 受保护路线
要实现受保护的路由，您可以创建自定义 privateroute 组件：
import { navigate, outlet } from 'react-router-dom';const useauth = () => { const user = { loggedin: true }; // replace with actual auth logic return user && user.loggedin;};const privateroute = () => { const isauth = useauth(); return isauth ? : ;};const app = () => { return ( <route path="/login" element={} /> <route path="/dashboard" element={}> <route path="" element={} /> );};export default app;
6. 程序化导航
有时，您可能希望以编程方式导航，例如在提交表单后。在 react router v6 中使用 usenavigate 钩子：
import { usenavigate } from 'react-router-dom';const login = () => { const navigate = usenavigate(); const handlelogin = () => { // login logic here... navigate('/dashboard'); }; return ( login
);};export default login;
7. 404 页
通过创建包罗万象的路由来处理 404（未找到）错误：
const notfound = () =>404 - page not found
;const app = () => { return ( <route path="/" element={} /> <route path="/about" element={} /> <route path="*" element={} /> );};export default app;
8. 性能考虑因素
对于大型应用程序，延迟加载路由可以提高性能。以下是如何使用 react.lazy() 和 suspense 实现延迟加载：
import React, { Suspense, lazy } from 'react';import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';const Home = lazy(() => import('./Home'));const About = lazy(() => import('./About'));const App = () => { return ( <Suspense fallback={Loading...}> <Route path="/" element={} /> <Route path="/about" element={} /> );};export default App;
以上就是掌握 React 路由：应用程序导航完整指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1492083.html
微信扫一扫 
支付宝扫一扫 
