React Bootstrap路由本地空白页，页面无法跳转问题排查

以下是导致你遇到该问题的最常见原因和对应修复方式：

1. 未正确安装依赖包 #

你需要安装的是**react-router-dom**（Web应用专用），而非react-router。执行以下命令完成安装：

npm install react-router-dom
# 或 yarn 用户执行
yarn add react-router-dom

2. 顶层未用路由容器包裹App组件 #

在index.js中，必须用BrowserRouter（或HashRouter）包裹整个App组件，否则路由系统无法初始化：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

3. App.js中路由配置不符合v6+规范 #

React Router v6及以上版本废弃了Switch，改用Routes组件包裹所有Route，且Route必须通过element属性传入页面组件：

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Projects from './pages/Projects';
import Contact from './pages/Contact';
import Navbar from './components/Navbar';

function App() {
  return (
    <div className="App">
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/projects" element={<Projects />} />
        <Route path="/contact" element={<Contact />} />
        {/* 可选：添加404页面避免空白 */}
        <Route path="*" element={<div>404 页面未找到</div>} />
      </Routes>
    </div>
  );
}

export default App;

4. 导航栏使用了普通<a>标签 #

普通<a>标签会触发页面刷新，导致路由失效，必须使用react-router-dom提供的Link组件：

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/projects">Projects</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

export default Navbar;

5. 页面组件导入路径错误 #

检查你导入Home、About等页面组件的路径是否正确，React对文件路径的大小写、层级结构敏感，比如组件在src/pages/Home.jsx，导入路径应为./pages/Home。

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