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

这是我第一次在此求助，我遇到了棘手的问题：我的React站点原本渲染正常，但一旦使用BrowserRouter组件，页面就完全无法渲染，仅显示空白屏幕。请帮忙排查我哪里出错了？

相关代码片段 #

App组件代码

import { NavBar, Download, Features, SectionWrapper } from "../src/components";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import assets from "./assets";
import "./index.css";

const App = () => {
  return (
     <BrowserRouter basename="/React">
       <NavBar />
      <Routes>
        <Route
          path="/"
          element={
            <SectionWrapper
              title="Lift Big"
              description="iNFO"
              showBtn
              mockupImg={assets.group1}
              banner="banner"
            />
          }
        />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

入口文件代码

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "../src/App";

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

package.json依赖部分

"name": "LiftBig",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://liftbig.co.uk/relativepath",
  "dependencies": {
    "@headlessui/react": "^1.6.5",
    "@heroicons/react": "^1.0.6",
    "babel": "^6.23.0",
    "heroicons-react": "^1.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },

SectionWrapper组件代码

import React from "react";

import { styles } from "../styles/Global";

import { Button } from "../buttons/Button";

const SectionWrapper = ({
  title,
  description,
  showBtn,
  mockupImg,
  banner,
  reverse,
}) => {
  return (
    <div
      className={`min-h-screen sticky ${styles.section} ${
        reverse ? styles.bgWhite : styles.bgPrimary
      } ${banner}`}
    >
      <div
        className={`flex items-center ${
          reverse ? styles.boxReverseClass : styles.boxClass
        } w-11/12 sm:w-full minmd:w-3/4`}
      >
        <div
          className={`${styles.descDiv} ${
            reverse ? "fadeRightMini" : "fadeLeftMini"
          }
          ${reverse ? styles.textRight : styles.textLeft}
          `}
        >
          <h1
            className={`
          ${reverse ? styles.blackText : styles.whiteText}
          
          ${styles.h1Text}`}
          >
            {title}
          </h1>
          <p
            className={` ${reverse ? styles.blackText : styles.whiteText} ${
              styles.descriptionText
            }`}
          >
            {description}
          </p>
          <div>
            <div style={{ display: "flex", flexDirection: "row" }}>
              <div>
                {showBtn && (
                  <Button
                    assetUrl="google"
                    link="Android Store"
                    info="App Store"
                  />
                )}
              </div>
              <div style={{ paddingLeft: 10 }}>
                {showBtn && (
                  <Button
                    assetUrl="apple"
                    link="Android Store"
                    info="Play Store"
                  />
                )}
              </div>
            </div>
          </div>
        </div>
        <div className={`flex-1 ${styles.flexCenter} p-8 sm:px-0`}>
          <img
            src={mockupImg}
            alt="mockup"
            className={`${styles.sectionImg} ${
              reverse ? "fadeleftMini" : "fadeRightMini"
            }`}
          />
        </div>
      </div>
    </div>
  );
};

export default SectionWrapper;

问题排查与解决 #

1. 核心问题：重复嵌套BrowserRouter

react-router-dom要求整个应用只需要一个根BrowserRouter提供路由上下文，你在入口文件和App组件中各套了一层，导致路由上下文冲突，直接引发页面无法渲染。

修改方案：

• 保留入口文件的BrowserRouter，把basename配置移到这里；
• 移除App组件内的BrowserRouter，只保留Routes和Route逻辑。

修改后的入口文件：

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "../src/App";

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

修改后的App组件：

import { NavBar, Download, Features, SectionWrapper } from "../src/components";
import { Routes, Route } from "react-router-dom";
import assets from "./assets";
import "./index.css";

const App = () => {
  return (
    <>
      <NavBar />
      <Routes>
        <Route
          path="/"
          element={
            <SectionWrapper
              title="Lift Big"
              description="iNFO"
              showBtn
              mockupImg={assets.group1}
              banner="banner"
            />
          }
        />
      </Routes>
    </>
  );
};

export default App;

2. 校验basename与homepage的一致性

你的package.json中homepage设置为http://liftbig.co.uk/relativepath，但basename用了/React，两者路径不匹配。如果是部署到子路径，basename需要和homepage的最后一段保持一致，否则会导致路由匹配失败，页面空白。

3. 排查其他潜在问题

• 临时注释掉<NavBar />，看页面是否能渲染SectionWrapper内容，排查NavBar组件自身报错；
• 检查styles对象中的类名（如styles.section、styles.bgPrimary）是否正确定义，避免样式导致元素不可见。

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