React Router使用后页面空白问题排查求助

你在开发多页面React应用时使用React Router，保存刷新页面后出现空白页，以下是你的代码：

Home组件 #

import React from "react";
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import AboutUs from './components/AboutUs';
import Footer from './components/Footer';

export default function Home() {
    return (
      <div>
        <Navbar />
        <Hero />
        <AboutUs />
        <Footer />
      </div>
    )
}

App组件（原错误代码） #

import React from 'react';
import Home from './Home';
import { Route, Router, browserHistory, Link } from "react-router-dom";

export default function App() {
  return (
        <Router history={browserHistory}>
            <Router exact path="/" component={Home} />
        </Router>
  );
}

index.js文件 #

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

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

错误点分析 #

• 重复嵌套路由容器且标签错误：index.js已经用BrowserRouter包裹了整个应用，App组件内无需再嵌套Router；同时你把Route错误写成了Router，导致路由无法正确渲染。
• API版本不兼容：你使用的是React Router v6+的包，但写法还是v5的旧API：
  • browserHistory在v6中已被移除，不再需要手动传入history；
  • v6中Route必须包裹在Routes组件内；
  • component属性已改为element，且需要传入JSX元素（如<Home />）；
  • exact属性已被移除，v6默认路由是精确匹配。

修正后的代码 #

App组件

import React from 'react';
import Home from './Home';
import { Routes, Route } from "react-router-dom";

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

index.js（保持原代码即可）

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

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

修改后重新运行，刷新页面即可正常显示内容。

内容的提问来源于stack exchange，提问作者Alin-Alexandru Peter