webpack编译成功但页面空白，React路由配置后无内容显示求助

我已导入全部路由，但访问本地服务器时仅显示空白页面，且已配置首页及其他页面。

App.js 代码 #

import React from "react";
import './App.css';

import Home from "./pages/Home";
import Rooms from "./pages/Rooms";
import SingleRoom from "./pages/SingleRoom";
import Error from "./pages/Error";

import {Route, Switch} from "react-router-dom";

import Navbar from "./components/Navbar"

function App() {
  return (
    <>
    <Navbar />
    <Switch>
      <Route exact path="/" component={<Home/>} />
      <Route exact path="/rooms/" component={<Rooms/>} />
      <Route exact path="/rooms/:slug" component={<SingleRoom/>} />
      <Route component={<Error/>} />
    </Switch>
    </>
  );
}

export default App;

index.js 代码 #

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

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

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

1. index.js 重复渲染导致路由上下文丢失 #

你在index.js里执行了两次页面渲染：

• 第一次用ReactDOM.render把包裹Router的App渲染到root节点
• 第二次用createRoot重新渲染了不带Router包裹的App，直接覆盖了之前的渲染结果

Route、Switch等路由组件必须在Router的上下文环境中才能正常工作，第二次渲染的App缺少这个上下文，导致路由完全失效，页面空白。

2. App.js 中 Route 组件的参数错误 #

在react-router-dom（v5版本）中，Route的component属性需要接收组件本身（比如Home），而不是组件实例（<Home/>这种写法是创建实例）。如果是v6版本，写法会有更大变化（移除Switch改用Routes，用element属性传实例）。

修正后的代码 #

index.js 修正版

保留一次渲染，且确保App被Router包裹：

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

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

App.js 修正版（适配 react-router-dom v5）

把component属性的值改为组件本身：

import React from "react";
import './App.css';

import Home from "./pages/Home";
import Rooms from "./pages/Rooms";
import SingleRoom from "./pages/SingleRoom";
import Error from "./pages/Error";

import {Route, Switch} from "react-router-dom";

import Navbar from "./components/Navbar"

function App() {
  return (
    <>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/rooms/" component={Rooms} />
        <Route exact path="/rooms/:slug" component={SingleRoom} />
        <Route component={Error} />
      </Switch>
    </>
  );
}

export default App;

App.js 修正版（适配 react-router-dom v6）

v6版本移除了Switch，改用Routes，且Route通过element属性传入组件实例：

import React from "react";
import './App.css';

import Home from "./pages/Home";
import Rooms from "./pages/Rooms";
import SingleRoom from "./pages/SingleRoom";
import Error from "./pages/Error";

import {Routes, Route} from "react-router-dom";

import Navbar from "./components/Navbar"

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/rooms/" element={<Rooms/>} />
        <Route path="/rooms/:slug" element={<SingleRoom/>} />
        <Route path="*" element={<Error/>} />
      </Routes>
    </>
  );
}

export default App;

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