React Router集成后页面无法渲染，请求技术协助

安全阿岳

2026-7-25

React Router集成后页面无法渲染问题排查

问题概述

集成React Router后网站无法正常运行，页面无法渲染，具体问题：

编译时出现http://localhost:3000/static/js/bundle.js脚本错误
控制台提示ReactDOM重复调用createRoot()的警告
UIkit相关TypeError：无法解构this._data的offset/height属性

代码文件

App.js

import React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";

import logo from "./logo.svg";

import "./App.css";
import "./nav.css";
import Keasy_warner from "./components/Keasy_warner";

let Menu_Icon = "./icons/menu.svg";


const router = createBrowserRouter([
    {
      path: "/",
      element: <Navbar/>,
    },
    {
        path: './Home',
        element: <Home pageName='THis is Home Page'/>
    },
  ]);
  
  ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
      <RouterProvider router={router}/>
    </React.StrictMode>
  );

function App() {
  return (
    <>
    </>
  );
}

export default App;

import React from 'react';
import $ from "jquery";

export default function Navbar() {
  return (
    <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">



<div className="sidebar open">
    <div className="logo-details">
        <i className='icon'><img className="pp_logo" src="./PP_LOGO.svg" alt=""/></i>

        <div className="logo_name">PP_BMK</div>
        <i className='bx bx-menu' id="btn"></i>
    </div>
    <ul className="nav-list">
        
        <li>
            <a href="/">
            <i className='bx bxs-dashboard className'></i>
                <span className="links_name">Dashboard</span>
            </a>
            <span className="tooltip">Dashboard</span>
        </li>
        <li className="lwm">
            <div className="iocn-link">
                <a href="#">
                <i className='bx bxs-folder icon'></i>
                    <span className="links_name">Keasy Warner</span>
                </a>
                <span className="tooltip">Keasy Warner</span>

            </div>
            
        </li>

                    <li className="profile">
                        <div className="profile-details">
                            <img src="./images/jjtu_logo_200x200.png" alt="profileImg"/>
                            <div className="name_job">
                                <div className="name">Exam Cell</div>
                                <div className="job">Manged By Vinnet Sir</div>
                            </div>
                        </div>
                        <i className='bx bx-log-out' id="log_out"></i>
                    </li>


    </ul>
</div>




</div>
  )
}

 $(function() {

    let sidebar = document.querySelector(".sidebar");
    let closeBtn = document.querySelector("#btn");
   
    closeBtn.addEventListener("click", () => {
        debugger;
      sidebar.classList.toggle("open");
      
      menuBtnChange(); //calling the function(optional)
    });
  
    // following are the code to change sidebar button(optional)
    function menuBtnChange() {
      if (sidebar.classList.contains("open")) {
        closeBtn.classList.replace("bx-menu", "bx-menu-alt-right"); //replacing the iocns class
      } else {
        closeBtn.classList.replace("bx-menu-alt-right", "bx-menu"); //replacing the iocns class
      }
    }
  });

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.13/dist/css/uikit.min.css" />

    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.13/dist/js/uikit-icons.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.13/dist/js/uikit.min.js"></script>

  </body>
</html>

报错信息

编译错误

Compiled with problems:
×
ERROR
Script error.
    at http://localhost:3000/static/js/bundle.js:55045:58

控制台错误

react-dom.development.js:86 Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
printWarning @ react-dom.development.js:86
uikit.min.js:1 Uncaught TypeError: Cannot destructure property 'offset' of 'this._data' as it is undefined.
    at n.hide (uikit.min.js:1:84516)
    at n.disconnected (uikit.min.js:1:81251)
    at uikit.min.js:1:28564
    at Array.forEach (<anonymous>)
    at fe (uikit.min.js:1:28551)
    at us (uikit.min.js:1:28787)
    at ia (uikit.min.js:1:32492)
    at Tt (uikit.min.js:1:11523)
    at ta (uikit.min.js:1:32184)
    at Array.forEach (<anonymous>)
uikit.min.js:1 TypeError: Cannot destructure property 'height' of 'undefined' as it is undefined.
    at n.read (uikit.min.js:1:81968)
    at Pr (uikit.min.js:1:24252)
    at uikit.min.js:1:24056
    at Ws (uikit.min.js:1:14745)
    at Zi (uikit.min.js:1:14478)
    at uikit.min.js:1:14694
Ws @ uikit.min.js:1
localhost/:1 Error while trying to use the following icon from the Manifest: http://localhost:3000/logo192.png (Download error or resource isn't a valid image)
localhost/:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

错误截图

脚本错误截图

解决方案

1. 修复ReactDOM重复调用createRoot的问题

create-react-app默认的index.js已经会执行createRoot().render()渲染App组件，你在App.js顶层重复执行该逻辑导致冲突。修改App.js，将路由渲染逻辑移到组件内部：

修改后的App.js：

import React from "react";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";

import "./App.css";
import "./nav.css";

const router = createBrowserRouter([
    {
      path: "/",
      element: <Navbar/>,
    },
    {
        path: '/Home', // 改为绝对路径
        element: <Home pageName='This is Home Page'/>
    },
  ]);

function App() {
  return (
    <React.StrictMode>
      <RouterProvider router={router}/>
    </React.StrictMode>
  );
}

export default App;

确保index.js保持默认渲染逻辑：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

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

2. 修复UIkit的TypeError问题

问题原因：uk-sticky指令指定的sel-target: .uk-navbar-container不存在于组件DOM中，导致UIkit初始化失败；同时jQuery初始化代码写在组件外部，此时DOM元素未挂载，会导致closeBtn为null。
修复步骤：
1. 调整uk-sticky配置，或在组件内添加.uk-navbar-container元素；
2. 使用React的useEffect钩子在组件挂载后初始化交互逻辑，确保DOM元素已存在。

修改后的Navbar.js：

import React, { useEffect } from 'react';
import $ from "jquery";

export default function Navbar() {
  useEffect(() => {
    const sidebar = document.querySelector(".sidebar");
    const closeBtn = document.querySelector("#btn");

    if (closeBtn) {
      const handleClick = () => {
        sidebar.classList.toggle("open");
        menuBtnChange();
      };
      closeBtn.addEventListener("click", handleClick);

      // 清理事件监听
      return () => closeBtn.removeEventListener("click", handleClick);
    }

    function menuBtnChange() {
      if (sidebar.classList.contains("open")) {
        closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");
      } else {
        closeBtn.classList.replace("bx-menu-alt-right", "bx-menu");
      }
    }
  }, []);

  return (
    <div uk-sticky="cls-active: uk-navbar-sticky">
      <div className="uk-navbar-container">
        <div className="sidebar open">
          <div className="logo-details">
            <i className='icon'><img className="pp_logo" src={`${process.env.PUBLIC_URL}/PP_LOGO.svg`} alt=""/></i>
            <div className="logo_name">PP_BMK</div>
            <i className='bx bx-menu' id="btn"></i>
          </div>
          <ul className="nav-list">
            <li>
              <a href="/">
                <i className='bx bxs-dashboard'></i>
                <span className="links_name">Dashboard</span>
              </a>
              <span className="tooltip">Dashboard</span>
            </li>
            <li className="lwm">
              <div className="iocn-link">
                <a href="#">
                  <i className='bx bxs-folder icon'></i>
                  <span className="links_name">Keasy Warner</span>
                </a>
                <span className="tooltip">Keasy Warner</span>
              </div>
            </li>
            <li className="profile">
              <div className="profile-details">
                <img src={`${process.env.PUBLIC_URL}/images/jjtu_logo_200x200.png`} alt="profileImg"/>
                <div className="name_job">
                  <div className="name">Exam Cell</div>
                  <div className="job">Managed By Vinnet Sir</div>
                </div>
              </div>
              <i className='bx bx-log-out' id="log_out"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}

3. 修复React Router路径问题

将path: './Home'改为path: '/Home'，React Router的路由路径均为绝对路径，相对路径会导致匹配失败。

4. 修复资源路径问题

React项目中public目录下的资源需用process.env.PUBLIC_URL拼接路径，确保开发环境能正确加载，如上述Navbar.js中的图片路径修改。

额外优化建议

使用React Router的<Link>组件替代原生<a>标签，避免页面刷新：

import { Link } from 'react-router-dom';
// 替换a标签
<Link to="/">Dashboard</Link>

尽量避免在React中使用jQuery，改用React状态管理和事件处理实现交互逻辑，减少DOM操作冲突。

内容的提问来源于stack exchange，提问作者Akki Jangir

React Router集成后页面无法渲染，请求技术协助

问题概述 #

代码文件 #

App.js #

Navbar.js #

Index.html #

报错信息 #

编译错误 #

控制台错误 #

错误截图 #

解决方案 #

1. 修复ReactDOM重复调用createRoot的问题 #

2. 修复UIkit的TypeError问题 #

3. 修复React Router路径问题 #

4. 修复资源路径问题 #

额外优化建议 #