使用react-router-dom新增页面时遇两类错误的技术问询

第一个错误「Server Error: ReferenceError: document is not defined」 #

你用的应该是Next.js这类服务端渲染（SSR）框架，服务端执行代码时不存在浏览器的document对象，而react-router-dom的BrowserRouter依赖document运行，直接在服务端渲染的入口文件（比如index.js或_app.js）中使用就会触发这个错误。

第二个错误「Element type is invalid」 #

大概率是以下原因之一：

• 你使用了react-router-dom v6，但仍在写旧版的Switch组件（v6已用Routes替代Switch）；
• 路由组件属性写错：v6里Route用element属性传入组件，而非旧版的component；
• 组件导入/导出错误：比如HomePage或AboutPage未正确导出，或导入路径有误；
• 添加document判断时逻辑出错，导致渲染了无效组件或空值。

解决方法 #

方案1：改用Next.js自带的文件系统路由（推荐） #

Next.js本身支持文件系统路由，无需额外配置react-router-dom：

• 在pages目录下新建about.js（或about/index.js）文件；
• 在该文件中编写About页面组件，保存后自动生效/about路径，无需手动配置路由规则。

方案2：继续使用react-router-dom（不推荐，需适配SSR） #

如果一定要用react-router-dom，需确保路由仅在客户端渲染：

方法A：在_app.js中判断客户端环境

import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './pages/index';
import AboutPage from './pages/about';

export default function MyApp() {
  const [isClient, setIsClient] = useState(false);

  // 仅在客户端渲染时初始化路由
  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) return null;

  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

方法B：用Next.js动态导入禁用SSR

1. 新建客户端路由组件components/RouterWrapper.js：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from '../pages/index';
import AboutPage from '../pages/about';

export default function RouterWrapper() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

2. 在_app.js中动态导入该组件并禁用SSR：

import dynamic from 'next/dynamic';

const RouterWrapper = dynamic(() => import('../components/RouterWrapper'), {
  ssr: false, // 禁用服务端渲染
});

export default function MyApp() {
  return <RouterWrapper />;
}

注意：使用react-router-dom会丢失Next.js的部分原生路由特性（如静态生成、增量静态再生等），因此优先推荐方案1。

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