404了怎么办快把路由给我断掉（React配置路由）

路由基础概念

什么是前端路由？

• 核心作用：管理单页面应用的页面切换
• 主要功能：
  根据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使用，获得更好的类型提示