使用React开发时本地浏览器无法显示内容的问题求助

问题现象 #

使用React搭建网站时，本地浏览器页面显示空白，无法加载内容。

本地页面截图：

控制台报错截图：

相关代码 #

App.js #

import React from "react";
import "./App.css"
import Layout from "./src/components/Layout/Layout";

function App() {
  return <Layout />
}

export default App;

Routers.js #

import { Routes, Route } from 'react-router-dom'

import Home from '../pages/Home';
import Shop from '../pages/Shop';
import Cart from '../pages/Cart';
import Product_Dets from '../pages/Product_Dets';
import Checkout from '../pages/Checkout';
import Login from '../pages/Login';
import Signup from '../pages/Signup';

const Routers = () => {
  return (
    <Routes>
      <Route path="home" element={<Home />} />
      <Route path="shop" element={<Shop />} />
      <Route path="shop/:id" element={<Product_Dets />} />
      <Route path="cart" element={<Cart />} />
      <Route path="checkout" element={<Checkout />} />
      <Route path="login" element={<Login />} />
      <Route path="signup" element={<Signup />} />
    </Routes>
  );
};

export default Routers;

index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import "remixicon/fonts/remixicon.css";
import "bootstrap/dist/css/bootstrap.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

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

Layout.jsx #

import React from "react";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import Routers from "../../routers/Routers";

const Layout = () => {
  return (
    <>
      <Header />
      <div>
        <Routers />
      </div>
      <Footer />
    </>
  );
};

export default Layout;

已尝试的方法 #

• 升级React版本
• 在Stack Overflow搜索类似问题，未找到有效解决方案

问题原因与解决方法 #

1. 路由未匹配根路径
   当前路由配置中没有根路径（/）的匹配规则，访问本地服务默认加载根路径，因此无内容渲染。需添加根路径重定向或默认路由：
   修改Routers.js，导入Navigate组件并新增根路径路由：

   import { Routes, Route, Navigate } from 'react-router-dom'
   // 保留原有组件导入
   
   const Routers = () => {
     return (
       <Routes>
         <Route path="/" element={<Navigate to="/home" />} />
         {/* 原有路由保持不变 */}
         <Route path="home" element={<Home />} />
         <Route path="shop" element={<Shop />} />
         <Route path="shop/:id" element={<Product_Dets />} />
         <Route path="cart" element={<Cart />} />
         <Route path="checkout" element={<Checkout />} />
         <Route path="login" element={<Login />} />
         <Route path="signup" element={<Signup />} />
       </Routes>
     );
   };
   

2. 组件导入路径校验
   确认所有组件导入路径是否正确：比如App.js中Layout的路径./src/components/Layout/Layout，若App.js位于项目根目录则路径正确；若App.js在src目录下，需调整为./components/Layout/Layout。同时检查文件名大小写（Linux/macOS环境区分大小写）。

3. 控制台错误针对性排查
   根据控制台报错信息进一步处理：

   • 若提示组件找不到，检查对应组件文件是否存在
   • 若提示依赖缺失，执行npm install或yarn install重新安装依赖

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