使用MongoDB的React项目LoginPage无法显示问题求助

问题背景 #

我正在开发一个使用MongoDB存储数据、Nodemon运行服务器的React项目。服务器启动后，根路径本该显示LoginPage，但页面无法正常展示。已确认所有组件路径正确，创建了测试数据并检查过DOM，仍无法定位问题。控制台报错：

Failed to load resource: net::ERR_CONNECTION_REFUSED

相关代码片段 #

App.js #

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './Scene/homePage';
import LoginPage from './Scene/loginPage';
import ProfilePage from './Scene/profilePage';
import { useMemo } from "react";
import { useSelector } from 'react-redux';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
import { themeSettings } from './theme';

function App() {
  const mode = useSelector((state) => state.mode);
  const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
  return (
    <div className="app">
      <BrowserRouter>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Routes>
            <Route path="/" element={<LoginPage />} />
            <Route path="/home" element={<HomePage />} />
            <Route path="/profile/:userId" element={<ProfilePage />} />
          </Routes>
        </ThemeProvider>
      </BrowserRouter>
    </div>
  );
}

export default App;

LoginPage Index.jsx #

import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
import Form from "./form";

const LoginPage = () => {
  const theme = useTheme();
  const isNonMobileScreens = useMediaQuery("(min-width: 1000px)");
  return (
    <Box>
      <Box
        width="100%"
        backgroundColor={theme.palette.background.alt}
        p="1rem 6%"
        textAlign="center"
      >
        <Typography fontWeight="bold" fontSize="32px" color="primary">
          Sociopedia
        </Typography>
      </Box>

      <Box
        width={isNonMobileScreens ? "50%" : "93%"}
        p="2rem"
        m="2rem auto"
        borderRadius="1.5rem"
        backgroundColor={theme.palette.background.alt}
      >
        <Typography fontWeight="500" variant="h5" sx={{ mb: "1.5rem" }}>
          Welcome to Blogit! Reinventing Blogging with style!
        </Typography>
        <Form />
      </Box>
    </Box>
  );
};

export default LoginPage;

HomePage.jsx #

import { Box } from "@mui/material";
import Navbar from "Scene/navbar";

const HomePage = () => {
    return (
        <Box>
            <Navbar />
        </Box>
    );
};

export default HomePage;

排查建议 #

• 优先检查后端服务状态
  ERR_CONNECTION_REFUSED核心是前端请求无法连接到目标服务，先确认Nodemon启动的后端是否正常运行：

  • 查看终端是否有后端启动成功的日志，比如Server running on port xxx；
  • 直接在浏览器访问后端的基础接口（如http://localhost:xxx/api/health），确认是否能返回正常响应；
  • 检查端口是否被其他程序占用，或者后端配置的MongoDB连接是否失败导致服务启动异常。

• 隔离Form组件的影响
  LoginPage中引入了Form组件，大概率是Form在挂载时发起了后端请求，但请求地址错误或后端未启动导致失败，进而阻塞组件渲染：

  • 暂时注释掉LoginPage里的<Form />代码，刷新页面看标题和容器是否能正常显示；
  • 如果页面能显示，说明问题出在Form组件内，检查Form中的API请求地址是否和后端服务的端口、路径匹配，是否存在跨域配置问题。

• 验证Redux与主题配置
  App组件依赖Redux的mode状态创建MUI主题，若状态初始化异常会导致样式失效：

  • 临时替换Redux相关代码，改用固定主题模式，比如const theme = createTheme(themeSettings('light'))，测试页面是否能渲染；
  • 打印theme对象，确认theme.palette.background.alt属性是否存在且有有效值，若不存在则修改themeSettings函数补充该配置。

• 检查路由与组件渲染细节

  • 给根路径的Route添加index属性，确保是默认路由：<Route index path="/" element={<LoginPage />} />；
  • 检查React Router版本是否为v6（当前代码写法符合v6规范），若版本不匹配会导致路由不生效；
  • 打开浏览器开发者工具的Elements面板，查看LoginPage的DOM元素是否存在，是否因为样式问题（比如display: none）导致不可见。

内容的提问来源于stack exchange，提问作者Anish Ivaturi