手把手教你用 React 和 Go 部署全栈项目（二）

第二章：配置 React 路由并与 Go 后端联动

在上一章，我们已经成功地启动了一个 Go 后端服务和一个 React 前端项目。这一章我们将继续推进，讲解如何为 React 项目添加多个页面，并通过前端路由进行访问。

一、安装 React 路由库

首先，我们需要安装前端路由库 react-router-dom：

复制代码

npm install react-router-dom

二、配置路由组件

我们使用 react-router-dom 来设置页面跳转逻辑。

`App.jsx`

这是项目的入口组件。我们使用 <BrowserRouter> 包裹整个 App，以启用 HTML5 路由功能。

javascript 复制代码

import React from "react";
import { BrowserRouter } from "react-router-dom";
import Router from "./router/Router";

function AppWithAuthCheck() {
    return <Router />;
}

export default function App() {
    return (
        <BrowserRouter>
            <AppWithAuthCheck />
        </BrowserRouter>
    );
}

`router/Router.jsx`

我们新建一个 Router.jsx 文件来集中管理路由配置。

javascript 复制代码

import React from "react";
import { Route, Routes } from "react-router-dom";

import Test1 from "../pages/test1.jsx";
import Test2 from "../pages/test2.jsx";

export default function Router() {
    return (
        <Routes>
            <Route path="/test1" element={<Test1 />} />
            <Route path="/test2" element={<Test2 />} />
        </Routes>
    );
}

三、创建页面组件

`pages/test1.jsx`

javascript 复制代码

import React from "react";

export default function Test1() {
    return (
        <div>
            <div>test1</div>
        </div>
    );
}

`pages/test2.jsx`

javascript 复制代码

import React from "react";

export default function Test2() {
    return (
        <div>
            <div>test2</div>
        </div>
    );
}

四、打包构建前端代码

使用以下命令将 React 项目打包成静态文件：

arduino 复制代码

npm run build

五、移动静态文件到 Go 后端

将构建好的前端静态文件复制到后端服务可访问的位置：

bash 复制代码

rm -rf ../../test/*
mv dist/* ../../test

注意：请根据你的 Go 项目的静态资源路径配置修改 ../../test 路径。

六、运行后端服务

启动 Go 后端服务：

go 复制代码

go run main.go

七、访问页面验证

在浏览器中访问以下页面：

http://127.0.0.1:18888/test1
✅ 页面显示：test1

http://127.0.0.1:18888/test2
✅ 页面显示：test2

🎉 成功！

我们已经成功配置了前端路由，并与后端结合，可以直接通过浏览器访问各个页面，撒花~ 🎉🌸🎉

接下来我们可以进一步支持嵌套路由、鉴权逻辑、前后端交互等等。

如需继续探索，请关注下一章节。👉