化工网站建设个人资质网站做推广

路由基础概念

什么是前端路由？

• 核心作用：管理单页面应用的页面切换
• 主要功能：
  根据URL显示对应组件
  保持浏览器历史记录
  实现页面间导航不刷新

React Router

包含三个主要包：

• react-router：核心逻辑
• react-router-dom：Web应用扩展
• react-router-native：React Native专用

---

学习前置条件

必要基础知识

1. HTML基础：理解标签结构
2. JavaScript ES6：
   • 箭头函数
   • 模块化导入导出（import/export）
3. React基础：
   • 组件概念
   • JSX语法
   • Props传递

学习步骤

1. 创建基础React项目
2. 安装配置React Router
3. 实现简单页面切换
4. 处理动态路由参数
5. 实现嵌套路由布局
6. 添加权限控制

---

快速上手

安装依赖

# 使用npm
npm install react-router-dom# 使用yarn
yarn add react-router-dom

基础路由配置

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BrowserRouter><App /></BrowserRouter>
);

定义路由结构

// App.jsx
import { Routes, Route } from 'react-router-dom';function App() {return (<Routes><Route path="/" element={<HomePage />} /><Route path="/products" element={<ProductList />} /><Route path="/about" element={<AboutPage />} /><Route path="*" element={<NotFound />} /></Routes>);
}

---

核心功能实现

页面导航

// 使用Link组件
import { Link } from 'react-router-dom';function Navigation() {return (<nav><Link to="/">首页</Link><Link to="/products">老大点我</Link></nav>);
}

动态路由参数

// 定义动态路由
<Route path="/names/:Lhuu" element={<NameDetail />} />// 获取参数
import { useParams } from 'react-router-dom';function NameDetail() {const { Lhuu } = useParams();return <div>来财羊大王: {Lhuu}</div>;
}

嵌套路由

// 父级路由
<Route path="/user" element={<UserLayout />}><Route index element={<Profile />} /><Route path="settings" element={<Settings />} />
</Route>// 子路由容器
import { Outlet } from 'react-router-dom';function UserLayout() {return (<div><header>个人站点</header><Outlet /> {/* 子路由显示位置 */}<footer>我的信息</footer></div>);
}

---

常见功能扩展

路由权限控制

function PrivateRoute({ children }) {const isLoggedIn = checkLoginStatus(); // 你的验证逻辑return isLoggedIn ? children : <Navigate to="/login" />;
}// 使用示例
<Route path="/dashboard"element={<PrivateRoute><Dashboard /></PrivateRoute>}
/>

404页面处理

<Route path="*"element={<div className="not-found"><h1>404 - 页面不存在</h1><Link to="/">返回首页</Link></div>}
/>

---

最佳实践建议

1. 路由分层管理：将路由配置抽离到单独文件
2. 代码分割：使用React.lazy实现按需加载
3. 路径常量：统一管理路由路径字符串
4. 版本控制：锁定React Router版本
5. 错误边界：配合错误边界组件处理异常

学习资源

• 官方文档
• React Router v6示例项目
• 路由调试工具：React Developer Tools

实际开发中建议结合TypeScript使用，获得更好的类型提示