使用Go的Echo框架部署带react-router-dom的React应用路由问题求助

问题根源是React使用的是客户端路由，当你直接访问如/about这类路由时，Echo服务器没有对应的服务端路由，会返回"未找到"错误。需要让服务器将所有非API、非静态资源的请求都返回React的index.html，由React的客户端路由接管处理。

修改后的服务端代码 #

package main

import (
    "fmt"
    checkerror "server/checkError"
    connectdb "server/connectDB"
    "server/handler"

    "github.com/gofor-little/env"
    echo "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
    _ "github.com/lib/pq"
)

func main() {
    err := env.Load(".env")
    if err != nil {
        fmt.Println(err.Error())
        return
    }
    userDB := connectdb.UserDB{Name: "Hi", DBP: nil}
    err = userDB.ConnectDB()
    fmt.Println(userDB.DBP)
    checkerror.Checkerror(err)
    
    e := echo.New()
    e.Use(middleware.Logger())

    // 1. 优先注册API路由，确保API请求不会被后续路由拦截
    handler.Apihandler(e, userDB.DBP)

    // 2. 配置静态资源服务，指向React构建后的build目录
    e.Static("/", "build")

    // 3. 通配符路由：所有未被API和静态资源匹配的GET请求，返回index.html
    e.GET("/*", func(c echo.Context) error {
        return c.File("build/index.html")
    })

    e.Logger.Fatal(e.Start(":1323"))
    
    defer func() {
        fmt.Println("DB disconnected")
        userDB.CloseDB()
    }()
}

关键修改说明 #

• 路由顺序调整：API路由必须最先注册，这样Echo会优先匹配API请求，不会被后续的静态资源或通配符路由拦截。
• 通配符路由：GET("/*")会匹配所有未被前面路由处理的GET请求，返回React的入口文件index.html，让react-router-dom接管客户端路由逻辑。
• 静态资源路径：确保e.Static和c.File的路径指向正确的React构建目录（这里是build），避免静态资源加载失败。

这样修改后，无论是直接访问React路由还是刷新页面，服务器都会返回index.html，React路由就能正常解析路径并渲染对应的组件。

内容的提问来源于stack exchange，提问作者Aditya Nandwana