React Router v6中BrowserRouter导致页面空白问题求助

跟着YouTube教程用React和Sanity CMS搭建博客，教程里的{ Switch }在React Router v6中已不再适用，改用BrowserRouter、Routes和Route相关代码后页面持续空白。移除BrowserRouter及路由代码后，Header组件可正常显示。控制台出现组件类型无效警告及useRef相关报错，相关代码、错误信息如下：

App.js #

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Header2 from "./components/Header";
import HomePage from "./pages/HomePage";
import Blog from "./pages/Blog";
import SinglePost from "./pages/SinglePost";
import Erorr from "./pages/Erorr";

function App() {
  return (
    <BrowserRouter>
      <Header2 />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/blog/:slug" element={<SinglePost />} />
        <Route path="/" element={<Erorr />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Header.js #

import React from 'react'
import { Link } from 'react-router-dom'
export default function Header2() {
  return (
    <>
      <h1>hi</h1>
      <header>
        <div className='logo'>
          <Link to="/">
            AndiiCodes Blog
          </Link>
        </div>
        <nav>
          <ul>
            <li>
              <button>
                <Link to="/blog" relative="path">Blog</Link>
              </button>
            </li>
            <li>
              <button>
                <Link to="/" relative="path">Home</Link>
              </button>
            </li>
          </ul>
        </nav>
      </header>
    </>
  )
}

控制台错误信息 #

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at App.js:13.
at App

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
at Object.useRef (react.development.js:1630:1)
at BrowserRouter (index.tsx:292:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)

react-dom.development.js:18687 The above error occurred in the component:
at BrowserRouter (http://localhost:3000/static/js/bundle.js:43763:5)
at App
Consider adding an error boundary to your tree to customize error handling behavior.

package.json #

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

已核对所有文件名，移除BrowserRouter及路由代码后Header可正常显示，添加后页面又变为空白。

1. 核心问题：缺少react-router-dom依赖 #

从你的package.json可以看到，项目里根本没有安装react-router-dom，但代码里却import了该包的组件，导致BrowserRouter等组件无法正常加载，进而触发useRef报错和组件类型无效警告。

2. 修复步骤 #

• 安装react-router-dom：
  在项目根目录运行命令：

  npm install react-router-dom
  

  或者使用yarn：

  yarn add react-router-dom
  

• 修复路由匹配逻辑：
  App.js里有两个路径为/的Route，React Router v6会优先匹配第一个，错误页永远无法触发。将错误页路由改为path="*"，用来匹配所有未定义的路径：

  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/blog" element={<Blog />} />
    <Route path="/blog/:slug" element={<SinglePost />} />
    <Route path="*" element={<Erorr />} /> {/* 修改此处 */}
  </Routes>
  

• 简化Header组件代码：
  Link组件的relative="path"是默认属性，可以直接删除，简化代码：

  <Link to="/blog">Blog</Link>
  <Link to="/">Home</Link>
  

3. 验证修复 #

安装依赖并修改代码后，重启开发服务器，页面即可正常显示，路由功能也能正常工作。

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