使用react-router-dom后React应用空白，提示需启用JavaScript的解决方法

我创建了一个React应用，添加了基于react-router-dom的导航栏代码，运行后页面空白无内容，打开控制台发现body标签内显示“You need to enable JavaScript to run this app.”。请问该如何操作才能加载实际内容？

组件代码 #

App.js #

import './App.css';
import React from "react"
import MainPage from './components/Mainpage'
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <React.Fragment>
          <BrowserRouter>
          <MainPage/>
          </BrowserRouter>
      </React.Fragment>
    </div>
  );
}

export default App;

Mainpage.js #

import React from 'react'
import Navbar from './Navbar'
import NavPage from './Navpage'

const MainPage = () => {
  return (
    <React.Fragment>
    <section className='md:w-2/5 md:mx-auto'>
        {/* navbar section */}
      <div className="bg-blue-100 h-20 w-full centered">
          <Navbar/>

      </div>

      {/* navPage section */}
      <div className="bg-blue-100 h-screen w-full">
          <NavPage/>

      </div>
    </section>
  </React.Fragment>
  )
}

export default MainPage

Navbar.js #

import React from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const activeLink = " bg-blue-100 text-black";
  const normalLink = "";

  return (
    <React.Fragment>
      <section>
        <div className="w-full h-16 bg-black text-white text-xl uppercase font-bold grid grid-cols-4 overflow-hidden">
          <NavLink
            to="/"
            className={({ isActive }) => (isActive ? activeLink : normalLink)}
          >
            <p className="border w-full h-full px-4 centered">URL</p>
          </NavLink>
          <NavLink
            to="/textpage"
            className={({ isActive }) => (isActive ? activeLink : normalLink)}
          >
            <p className="border w-full h-full px-4 centered">PlainText</p>
          </NavLink>
          <NavLink
            to="/phonepage"
            className={({ isActive }) => (isActive ? activeLink : normalLink)}
          >
            <p className="border w-full h-full px-4 centered">Phone</p>
          </NavLink>
          <NavLink
            to="/smspage"
            className={({ isActive }) => (isActive ? activeLink : normalLink)}
          >
            <p className="border w-full h-full px-4 centered">SMS</p>
          </NavLink>
          <NavLink
            to="/mailpage"
            className={({ isActive }) => (isActive ? activeLink : normalLink)}
          >
            <p className="border w-full h-full px-4 centered">Mail</p>
          </NavLink>
          <NavLink
            to="/wifipage"
            className={({ isActive }) => (isActive ? activeLink : normalLink)}
          >
            <p className="border w-full h-full px-4 centered">Wifi</p>
          </NavLink>
          <NavLink
            to="/pdfpage"
            className={({ isActive }) => (isActive ? activeLink : normalLink)}
          >
            <p className="border w-full h-full px-4 centered">Pdf</p>
          </NavLink>
          <NavLink
            to="/imagepage"
            className={({ isActive }) => (isActive ? activeLink : normalLink)}
          >
            <p className="border w-full h-full px-4 centered">Image</p>
          </NavLink>
         
        </div>
      </section>
    </React.Fragment>
  );
};

export default Navbar;

Navpage.js #

import React from "react";
import { Routes, Route } from "react-router-dom";
import Urlpage from '../pages/Urlpage';
import Textpage from '../pages/Textpage';
import Phonepage from '../pages/Phonepage';
import Smspage from '../pages/Smspage';
import Mailpage from '../pages/Mailpage';
import Wifipage from '../pages/Wifipage';
import Pdfpage from '../pages/Pdfpage';
import Imagepage from '../pages/Imagepage';

const NavPage = () => {
  return (
    <React.Fragment>
      <section>
        <Routes>
          <Route path="/" element={<Urlpage />} />
          <Route path="/textpage" element={<Textpage />} />
          <Route path="/phonepage" element={<Phonepage />} />
          <Route path="/smspage" element={<Smspage />} />
          <Route path="/mailpage" element={<Mailpage />} />
          <Route path="/wifipage" element={<Wifipage/>} />
          <Route path="/pdfpage " element={<Pdfpage />} />
          <Route path="/imagepage " element={<Imagepage />} />

        </Routes>
      </section>
    </React.Fragment>
  );
};

export default NavPage;

解决步骤 #

1. 修正路由路径的空格问题 #

在Navpage.js中，/pdfpage 和/imagepage 路径末尾多了空格，这会导致路由无法匹配对应的页面组件。修改为：

<Route path="/pdfpage" element={<Pdfpage />} />
<Route path="/imagepage" element={<Imagepage />} />

2. 确认JavaScript已启用 #

检查浏览器设置，确保JavaScript未被禁用：

• Chrome：设置 → 隐私和安全 → 网站设置 → JavaScript → 开启
• Firefox：设置 → 隐私与安全 → 权限 → JavaScript → 勾选允许运行

3. 验证依赖与组件完整性 #

• 确保已安装react-router-dom：执行npm install react-router-dom
• 确认../pages/目录下的所有页面组件（如Urlpage、Textpage等）都存在且正确导出，每个组件至少包含基础的JSX内容

4. 修复缺失的CSS类 #

代码中使用了centered类但未定义，在App.css中添加：

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

5. 清除缓存重启服务 #

• 停止开发服务器（Ctrl+C）
• 删除node_modules和package-lock.json
• 重新安装依赖：npm install
• 重启服务器：npm start

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