0501路由-react-仿低代码平台项目

1 react路由

1.1 核心库：React Router

React 官方推荐使用 React Router 实现路由功能。当前主流版本是 v6.x（注意与旧版 v5 的语法差异）。

安装

yarn add react-router-dom

---

1.2 基本路由配置

路由入口组件

在应用顶层包裹 <BrowserRouter>（或 <HashRouter>）：

import { BrowserRouter } from 'react-router-dom';function App() {return (<BrowserRouter>{/* 路由配置 */}</BrowserRouter>);
}

定义路由

使用 <Routes> 和 <Route> 定义路由映射：

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import User from './User';function App() {return (<Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/user/:id" element={<User />} /></Routes>);
}

---

1.3 导航方式

使用 <Link> 组件

替代 <a> 标签实现无刷新跳转：

import { Link } from 'react-router-dom';function Nav() {return (<nav><Link to="/">Home</Link><Link to="/about">About</Link></nav>);
}

编程式导航

通过 useNavigate Hook 跳转：

import { useNavigate } from 'react-router-dom';function Button() {const navigate = useNavigate();return (<button onClick={() => navigate('/user/123')}>Go to User 123</button>);
}

---

1.4 动态路由参数

定义参数

在路径中使用 :param 定义动态参数：

<Route path="/user/:id" element={<User />} />

获取参数

通过 useParams Hook 获取参数：

import { useParams } from 'react-router-dom';function User() {const { id } = useParams();return <div>User ID: {id}</div>;
}

---

1.5 嵌套路由

父路由配置

使用嵌套 <Route> 定义子路由：

<Route path="/dashboard" element={<Dashboard />}><Route path="profile" element={<Profile />} /><Route path="settings" element={<Settings />} />
</Route>

子路由占位符

父组件中通过 <Outlet> 渲染子路由内容：

import { Outlet } from 'react-router-dom';function Dashboard() {return (<div><h1>Dashboard</h1><Outlet /> {/* 子路由在此渲染 */}</div>);
}

---

1.6 重定向与404页面

重定向

使用 <Navigate> 组件：

<Route path="/old-path" element={<Navigate to="/new-path" />} />

404页面

通过 path="*" 匹配未知路径：

<Route path="*" element={<NotFound />} />

---

1.7 路由守卫（权限控制）

通过封装 <Route> 实现登录验证等逻辑：

function PrivateRoute({ children }) {const isAuthenticated = checkAuth(); // 自定义权限检查return isAuthenticated ? children : <Navigate to="/login" />;
}// 使用
<Route path="/admin" element={<PrivateRoute><Admin /></PrivateRoute>} />

---

1.8 代码分割与懒加载

结合 React.lazy 实现路由懒加载：

const About = React.lazy(() => import('./About'));<Route path="/about" element={<React.Suspense fallback={<Loading />}><About /></React.Suspense>
} />

---

注意事项

1. 版本兼容性：v6 与 v5 差异较大（如 Switch 替换为 Routes，component 改为 element）。
2. 路径匹配：v6 默认精确匹配，无需添加 exact 属性。
3. 相对路径：v6 支持嵌套路由中的相对路径跳转。

---

完整示例

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';function App() {return (<BrowserRouter><nav><Link to="/">Home</Link><Link to="/about">About</Link></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/user/:id" element={<User />} /><Route path="*" element={<NotFound />} /></Routes></BrowserRouter>);
}

掌握这些核心概念后，你可以构建复杂的路由逻辑，实现动态页面切换、权限控制等高级功能。

2 问卷系统业务流程图

阶段1：用户身份验证

---

阶段2：问卷创建与管理

---

阶段3：问卷发布与分发

---

阶段4：数据收集与填写

---

阶段5：数据分析与处理

---

阶段6：问卷终止或循环

---

关键分支说明

1. 权限控制
   • 管理员可批量管理问卷、审核敏感内容；
   • 普通用户仅限操作自有问卷。
2. 异常处理
   • 填写中断自动保存草稿；
   • 提交失败时提示错误类型（如必填项未填）。
3. 高级功能扩展
   • 付费版支持A/B测试、高级分析；
   • 企业版集成SSO登录、数据加密。

---

此流程图覆盖了问卷系统从创建到分析的核心业务闭环，可根据实际需求调整分支复杂度。

3 路由设计

3.1 页面对应的路由

• 首页: /
• 登录：/login
• 注册：/register
• 问卷管理: /manage
  • 我的问卷：/manage/list
  • 星标问卷：/manage/star
  • 回收站：/manage/trash
• 问卷详情：/question
  • 编辑问卷：/question/edit/:id
  • 问卷统计：/question/stat/:id
• 404：访问不存在页面跳转404

3.2、Layout模版

Axure RP设计布局

Layout：布局，用于设置应用整体结构。

• MainLayout：整体布局

  • 头部

    • 网站标题、log
    • 首页导航
    • 登录/注册、个人中心等

  • 主体

    • 左侧导航菜单
    • 右侧内容

  • 底部：

    • 网站信息：备案、联系方式等

• ManageLayout

• QuestionLayout

4 实践

• 按设计，新建若干页面

• 为每个页面配置路由

• 分配对应的Layout模版

4.1 创建页面

• pages
  • manage：问卷管理
    • List.tsx：我的问卷
    • List.module.scss：我的问卷样式
    • Star.tsx：标星问卷
    • Trash.tsx：回收站
  • question：问卷详情
    • Edit
      • index.tsx：编辑问卷
    • Stat
      • index.tsx：问卷统计
  • Home.tsx：默认页
  • Login.tsx：登录页
  • NotFound.tsx：404跳转页
  • Register.tsx：注册页

4.2 创建layout

• layouts
  • MainLayout.tsx：主布局
  • ManageLayout.module.scss：主布局样式
  • ManageLayout.tsx：问卷管理布局
  • QuestionLayout.tsx：问卷详情布局

4.3 配置router

• route
  • index.tsx

代码如下所示：

import { createBrowserRouter } from "react-router-dom";import MainLayout from "../layouts/MainLayout";
import ManageLayout from "../layouts/ManageLayout";
import QuestionLayout from "../layouts/QuestionLayout";import Home from "../pages/Home";
import Login from "../pages/Login";
import Register from "../pages/Register";
import NotFound from "../pages/NotFound";
import List from "../pages/manage/List";
import Star from "../pages/manage/Star";
import Trash from "../pages/manage/Trash";
import Edit from "../pages/question/Edit";
import Stat from "../pages/question/Stat";const router = createBrowserRouter([{path: "/",element: <MainLayout />,children: [{path: "/",element: <Home />,},{path: "login",element: <Login />,},{path: "register",element: <Register />,},{path: "manage",element: <ManageLayout />,children: [{path: "list",element: <List />,},{path: "star",element: <Star />,},{path: "trash",element: <Trash />,},],},{path: "*",element: <NotFound />,},],},{path: "/question",element: <QuestionLayout />,children: [{path: "edit/:id",element: <Edit />,},{path: "stat/:id",element: <Stat />,},],},
]);export default router;

4.4 使用路由api-页面跳转和获取参数

页面跳转

• useNavigate
• Link

Home.tsx代码如下所示：

import { FC } from "react";
import { useNavigate, Link } from "react-router-dom";const Home: FC = () => {const nav = useNavigate();function clickHandler() {nav({pathname: "/login",search: "a=20",});}return (<div><p>Home</p><div><button onClick={clickHandler}>登录</button><Link to="/register">注册</Link></div></div>);
};export default Home;

传参和获取参数

传参参考上面示例，获取参数

• useParams
• useSearchParams

import { FC } from "react";
import { useParams } from "react-router-dom";const Edit: FC = () => {const { id = "" } = useParams();return <div>Edit {id}</div>;
};export default Edit;

import { FC } from "react";
import { useSearchParams } from "react-router-dom";
import { useImmer } from "use-immer";import QuestionCard from "../../components/QuestionCard";
import styles from "./List.module.scss";...const List: FC = () => {const [searchParams] = useSearchParams();console.log("keyword", searchParams.get("keyword"));...
};export default List;

4.5 自定义网页标题和favicon

修改首页index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>问卷调查</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body>
</html>

使用第三方ahooks

...
import { useTitle } from "ahooks";
...const List: FC = () => {useTitle('调查问卷-我的问卷')
...
};export default List;

结语

❓QQ:806797785

⭐️仓库地址：https://gitee.com/gaogzhen

⭐️仓库地址：https://github.com/gaogzhen