React+Next.js侧边栏路由404求助：指定页面无法访问

问题说明 #

使用React Router和Next.js开发带侧边栏的页面时，刷新http://localhost:3000/user/pages/Home页面持续出现404“页面未找到”错误。

当前文件结构 #

D:\Projekte\Learning\app\user:
- 文件夹: navbar, pages
- 文件: page.tsx

D:\Projects\Learning\app\user\navbar:
- 文件: Sidebar.tsx, SidebarPath.tsx

D:\Projects\Learning\app\user\pages:
- 文件夹: Server
- 文件: Home.tsx

现有代码 #

Seite.tsx #

"use client";

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Sidebar from "./navbar/Sidebar";
import Home from "./pages/Home";
import { signOut } from "next-auth/react";

const App = () => {
  return (
    <React.StrictMode>
      <Router>
        <div className="flex">
          <Sidebar>
          <div className="w-4/5">
            <Routen>
              <Route path="/user/pages/Home" element={<Home />} />
            </Routen>
          </div>
        </div>
      </Router>
      <button onClick={() => signOut()}>text</button>
    </React.StrictMode>
  );
};

export default App;

Home.tsx #

import React from "react";

const Home = () => {
  return (
    <div className="text-center">
      <h1 className="text-center text-3xl">Home</h1>
    </div>
  );
};

export default Home;

Sidebar.tsx #

import React from "react";
import { Link } from "react-router-dom";
import { SidebarPath } from "./SidebarPath";

const Sidebar = () => {
  return (
    <div className="w-52 bg-gray-200 h-screen">
      <nav className="mt-10">
        <ul className="space-y-2">
          {SidebarPath.map((item, index) => (
            <li key={index} className="px-4 py-2 hover:bg-gray-300">
              <Link to={item.path} className="flex items-center">
                {item.icon}
                <span className="ml-2">{item.title}</span>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default sidebar;

SidebarPath.tsx #

import React from "react";
import * as AiIcons from "react-icons/ai";

export const SidebarPath = [
  {
    title: "Home",
    path: "/user/pages/Home",
    icon: <AiIcons.AiFillHome />,
  },
];

已尝试的排查步骤 #

• 确认Home.tsx路径正确
• 更新SidebarPath路由路径
• 检查依赖为最新版本
• 重启开发服务器

问题根源与解决方法 #

核心问题 #

你在Next.js App Router模式下混用了React Router的BrowserRouter，两者路由机制冲突：Next.js服务器会根据文件系统路由处理请求，刷新页面时服务器找不到/user/pages/Home对应的文件，因此返回404；而React Router是纯客户端路由，仅在客户端跳转有效，无法覆盖Next.js的服务器路由逻辑。

具体修复步骤 #

1. 调整文件结构适配Next.js App Router

Next.js App Router要求每个路由对应一个page.tsx文件，修改结构如下：

• 将app/user/pages/Home.tsx移动到app/user/home/page.tsx
• 在app/user/下创建layout.tsx（用于渲染侧边栏等公共布局）

2. 移除React Router依赖，改用Next.js原生路由

卸载React Router：

npm uninstall react-router-dom

3. 修正侧边栏代码

替换React Router的Link为Next.js的next/link，并修改路由路径：

// app/user/navbar/Sidebar.tsx
import React from "react";
import Link from "next/link";
import { SidebarPath } from "./SidebarPath";

const Sidebar = () => {
  return (
    <div className="w-52 bg-gray-200 h-screen">
      <nav className="mt-10">
        <ul className="space-y-2">
          {SidebarPath.map((item, index) => (
            <li key={index} className="px-4 py-2 hover:bg-gray-300">
              <Link href={item.path} className="flex items-center">
                {item.icon}
                <span className="ml-2">{item.title}</span>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default Sidebar; // 修正大小写错误：原代码是sidebar，应为Sidebar

4. 更新SidebarPath的路由路径

// app/user/navbar/SidebarPath.tsx
import React from "react";
import * as AiIcons from "react-icons/ai";

export const SidebarPath = [
  {
    title: "Home",
    path: "/user/home", // 改为Next.js路由格式
    icon: <AiIcons.AiFillHome />,
  },
];

5. 创建用户布局文件（app/user/layout.tsx）

用于持久化侧边栏，所有/user下的子路由都会继承该布局：

import React from 'react';
import Sidebar from './navbar/Sidebar';

export default function UserLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <Sidebar />
      <div className="w-4/5">{children}</div>
    </div>
  );
}

6. 修正主页面代码（app/user/page.tsx）

作为/user的默认入口页面：

"use client";
import { signOut } from "next-auth/react";

export default function UserPage() {
  return (
    <>
      <div className="text-center">
        <h1 className="text-3xl">用户控制台</h1>
      </div>
      <button onClick={() => signOut()}>退出登录</button>
    </>
  );
}

额外代码错误修正 #

• Seite.tsx中<Routen>应为<Routes>（拼写错误）
• Sidebar.tsx中export default sidebar;应为export default Sidebar;（大小写错误）

验证效果 #

启动开发服务器后，访问http://localhost:3000/user/home，刷新页面即可正常加载，不会再出现404错误。

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