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

gaog2zh2025-04-15 20:31

文章目录

1 react路由

1.1 核心库：React Router

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

安装
bash 复制代码 
yarn add react-router-dom

1.2 基本路由配置

路由入口组件

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

jsx 复制代码 
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 路由配置 */}
    </BrowserRouter>
  );
}
定义路由

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

jsx 复制代码 
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> 标签实现无刷新跳转：

jsx 复制代码 
import { Link } from 'react-router-dom';

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}
编程式导航

通过 useNavigate Hook 跳转：

jsx 复制代码 
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 定义动态参数：

jsx 复制代码 
<Route path="/user/:id" element={<User />} />
获取参数

通过 useParams Hook 获取参数：

jsx 复制代码 
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

1.5 嵌套路由

父路由配置

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

jsx 复制代码 
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>
子路由占位符

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

jsx 复制代码 
import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 子路由在此渲染 */}
    </div>
  );
}

1.6 重定向与404页面

重定向

使用 <Navigate> 组件：

jsx 复制代码 
<Route path="/old-path" element={<Navigate to="/new-path" />} />
404页面

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

jsx 复制代码 
<Route path="*" element={<NotFound />} />

1.7 路由守卫（权限控制）

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

jsx 复制代码 
function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth(); // 自定义权限检查
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// 使用
<Route path="/admin" element={<PrivateRoute><Admin /></PrivateRoute>} />

1.8 代码分割与懒加载

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

jsx 复制代码 
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 支持嵌套路由中的相对路径跳转。

完整示例

jsx 复制代码 
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：问卷创建与管理

是 否 否 是 C 创建新问卷 使用模板? 选择模板库问卷 自定义新建空白问卷 编辑基础信息 标题/描述 设置截止时间 匿名/实名填写 设计问题 题型设置: 单选/多选/文本等 逻辑跳转: 根据答案跳转题目 预览测试 验证通过? 保存问卷草稿/发布

阶段3：问卷发布与分发

是 否 是 否 M 需审核? 提交管理员审核 审核通过? J 发布问卷 选择分发渠道 生成链接/二维码 邮件邀请 嵌入网站/APP

阶段4：数据收集与填写

是 否 错误 通过 R 填写者访问问卷 身份验证? 登录/验证身份 直接填写 填写问题 逻辑校验 提交问卷 数据存储至数据库

阶段5：数据分析与处理

Z 实时数据统计 图表展示: 柱状图/饼图 文本答案词云 导出原始数据 Excel/CSV API对接第三方工具 生成分析报告 下载/分享报告

阶段6：问卷终止或循环

是 否 AD 需重新编辑? J 关闭问卷 停止数据收集 归档历史数据

关键分支说明

  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

代码如下所示：

react 复制代码 
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代码如下所示：

react 复制代码 
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
react 复制代码 
import { FC } from "react";
import { useParams } from "react-router-dom";

const Edit: FC = () => {
  const { id = "" } = useParams();

  return <div>Edit {id}</div>;
};

export default Edit;
react 复制代码 
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

react 复制代码 
...
import { useTitle } from "ahooks";
...

const List: FC = () => {

  useTitle('调查问卷-我的问卷')
...
};

export default List;

结语

❓QQ:806797785

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

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

相关推荐
喜樂的CC7 小时前
[react]Next.js之自适应布局和高清屏幕适配解决方案
javascript·react.js·postcss
旭久8 小时前
react+Tesseract.js实现前端拍照获取/选择文件等文字识别OCR
前端·javascript·react.js
outstanding木槿9 小时前
React中 点击事件写法 的注意（this、箭头函数）
前端·javascript·react.js
涵信10 小时前
2024年React最新高频面试题及核心考点解析，涵盖基础、进阶和新特性，助你高效备战
前端·react.js·前端框架
JiangJiang12 小时前
🚀 Vue人看React useRef：它不只是替代 ref
javascript·react.js·面试
低代码布道师14 小时前
加油站小程序实战教程10开通会员
前端·javascript·低代码·小程序
有机后脑16 小时前
一个老生常谈的问题: React 中 Fiber 的理解以及什么是 Fiber 双缓冲?
react.js
limit007518 小时前
免费下载地图切片数据以及通过CesiumEarth在Windows和安卓本地浏览
低代码·3d·arcgis·web3·安卓
小钰能吃三碗饭20 小时前
第七篇：【React 实战项目】从零构建企业级应用完全指南
前端·javascript·react.js
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03DeepSeek各版本说明与优缺点分析04Scipy||第三章 线性代数 (scipy.linalg)05DeepSeek RAGFlow构建本地知识库系统06如何在WPS和Word/Excel中直接使用DeepSeek功能07C#/.NET/.NET Core技术前沿周刊 | 第 34 期（2025年4.7-4.13）08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10ZNS SSD垃圾回收优化方案解读-1