路由设计

ReactGO 前端使用 react-router-dom v6 路由器，这个路由器支持嵌套路由，很方便。后端使用 Echo HTTP 框架，这个框架支持 Group，因此也很方便，本文档介绍 ReactGO 的路由套路。

路由设计原则

设计路由时，需要牵涉到前端和后端，父与子的关系，ReactGO 套路的基本原则是针对单个实体设计一组父子路由，多个实体就使用多组路由，不要为了节省路由将多个实体交叉在一起，那样很混乱。

URL

父子路由的 url 应该有明确的关系，例如 /user 表示用户组的起点（父），/user/modify 则是子，这种设计很自然，工作的也很好，所以设计新的路由时也应该遵循这种方法。

前端路由

react-router-dom 支持嵌套路由，因此我们可以将自己的一组路由单独封装好，之后在挂到更上层的路由就可以了，这样很方便维护。

我们这里以用户管理为例，我们有几个功能：用户列表、修改用户信息、添加新用户，它们对应的 url 应该是：

some/user/
some/user/modify
some/user/add

新建一个 user 目录，里面创建 4 个文件，分别是：

index.jsx
list.jsx
modify.jsx
add.jsx

在哪里创建 user 目录

因为文件系统的结构和 url 的结构基本一样，设计得当的情况下，user 目录在磁盘中的位置正好是在 url 中的位置。

index.jsx 用于定义路由，代码大致如下：

import { Routes, Route } from "react-router-dom";
import NotFound from "~/route/notfound";
import List from "./list";
import Add from "./add";
import Modify from "./modify";

export default function User() {
  return (
    <Routes>
      <Route path='/' element={<List />} />
      <Route path='add' element={<Add />} />
      <Route path='modify' element={<Modify />} />
      <Route path='*' element={<NotFound />} />
    </Routes>
  )
}

然后 add.jsx, modify.jsx, list.jsx 分别实现上面的对应的组件。注意我们加了一个 NotFound 路由，这个是可选的，加上可以在不能匹配到路由时显示一个错误页面。

这组路由定义好之后，在更高层进行挂载，大致代码如下：

import User from './user';

export default Some() {
  ...
    <Route path='user/*' element={<User />} />
  ...
}

后端路由

ReactGO 是前后端分离的，前端通过 fetch 发送 HTTP 请求后端，后端只需要处理数据，所以设计后端路由相对更简单。后端采用 Go 语言和 Echo 框架，需要按照它们的语法写，下面是套路代码：

新建 user 目录，在目录中新建下列文件：

attach.go
list.go
modify.go
add.go

attach.go 的代码大致如下：

package user

import (
  "github.com/labstack/echo/v4"

  "github.com/lucky-byte/reactgo/serve/route/index/acl"
)

func Attach(up *echo.Group) {
    group := up.Group("/user")

    group.POST("/list", list)
    group.PUT("/modify", modify)
    group.POST("/add", add)
}

list.go, modify.go, add.go 分别实现 list, modify, add 方法，实现业务逻辑。完了将 user group 挂载到更高的路由，大致代码如下：

func Attach(up *echo.Group) {
  group := up.Group("/some")

  ...
  user.Attach(group)
  ...
}

路由设计

路由设计原则​

URL​

前端路由​

在哪里创建 user 目录

后端路由​

路由设计原则

URL

前端路由

后端路由