面试题：Node.js与React结合中的路由管理

1. Express处理后端路由

定义路由：在Express中，通过app.get、app.post等方法定义不同HTTP方法对应的路由。例如：

const express = require('express');
const app = express();

// 处理GET请求的路由
app.get('/api/users', (req, res) => {
  // 这里处理获取用户列表的逻辑，例如从数据库获取数据
  res.json({ users: [] });
});

// 处理POST请求的路由
app.post('/api/users', (req, res) => {
  // 这里处理创建新用户的逻辑，例如将请求体数据保存到数据库
  res.json({ message: 'User created successfully' });
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

功能：Express后端路由主要负责处理来自客户端（浏览器或其他前端应用）的HTTP请求，与数据库交互，处理业务逻辑，然后返回相应的数据或状态码。它可以根据请求的URL和HTTP方法，执行不同的操作，如获取数据、创建数据、更新数据或删除数据等。

2. React Router处理前端路由

安装与导入：首先在React项目中安装react-router-dom（适用于Web应用），然后在项目中导入相关组件。例如：

import { BrowserRouter as Router, Routes, Route } from'react-router-dom';

定义路由：在React应用的组件树中，使用Router、Routes和Route组件定义前端路由。例如：

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

功能：React Router前端路由允许在单页应用（SPA）中实现页面的导航和切换，无需完整的页面刷新。它通过监听浏览器的URL变化，匹配相应的路由规则，然后渲染对应的React组件，从而提供流畅的用户体验，就像在多个不同页面间跳转一样。

3. 两者协同工作

前后端分离架构：在现代化Web应用开发中，通常采用前后端分离架构。前端通过React Router管理用户在客户端的页面导航，当用户在前端页面进行操作，需要获取数据或执行其他后端操作时，前端会向Express定义的后端路由发送HTTP请求。
数据交互：例如，前端页面（由React Router管理）可能有一个“用户列表”页面，当页面渲染时，它会向Express后端的/api/users路由发送GET请求（使用fetch或其他HTTP请求库）。Express后端接收到请求后，处理业务逻辑（如从数据库获取用户数据），然后返回数据给前端。前端接收到数据后，更新页面显示用户列表。
路由映射：虽然前后端路由管理不同层面的导航，但它们之间存在一定的映射关系。前端路由定义的路径可能与后端提供数据的API路径相关联，前端通过这些路径请求后端数据以更新页面内容，而后端则负责处理这些请求并返回相应数据，共同完成一个完整的Web应用功能。

星途面试题库

面试题：Node.js与React结合中的路由管理

知识考点

面试题答案

1. Express处理后端路由

2. React Router处理前端路由

3. 两者协同工作