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

发布于：2025-04-12 ⋅ 阅读:(30) ⋅ 点赞:(0)

文章目录

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：问卷创建与管理
是
否
否
是
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

代码如下所示：

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

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布