如何解决React-router-dom导致页面空白的问题

问题根源 #

1. 多层嵌套BrowserRouter：index.js和App.js同时使用了<Router>（即BrowserRouter），React Router不允许重复嵌套路由上下文，这会导致路由逻辑冲突，页面无法正常渲染。
2. Route组件语法错误：index.js中使用了过时的Component属性（v6版本已改为element），并且直接传入组件实例<App />的方式不符合规范。
3. Navbar布局逻辑错误：App.js中把Navbar放在了<Routes>内部的Route里，导致只有访问根路径时才显示导航栏，且根路径仅渲染Navbar，未展示Home内容。

修改后的代码 #

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Js_component/Navbar';
import Home from './Js_component/Home';
// 请根据实际需求导入About、Explore、Contact等组件

function App() {
  return (
    <Router>
      {/* 导航栏放在Routes外部，确保所有路由页面都能显示 */}
      <Navbar />
      <Routes>
        {/* 根路径渲染Home组件，匹配导航栏的Home链接 */}
        <Route path='/' element={<Home />} />
        {/* 保留/home路径的映射（可选） */}
        <Route path='/Home' element={<Home />} />
        {/* 补充其他页面路由 */}
        {/* <Route path='/About' element={<About />} /> */}
        {/* <Route path='/Explore' element={<Explore />} /> */}
        {/* <Route path='/Contact' element={<Contact />} /> */}
      </Routes>
    </Router>
  );
}

export default App;

关键修改说明 #

• 移除index.js中的Router嵌套，让App组件作为路由的唯一入口，避免上下文冲突。
• 将Navbar移至<Routes>外部，保证所有路由页面都能显示导航栏，符合常规页面布局逻辑。
• 调整根路径的路由映射，让访问/时直接渲染Home组件，与导航栏的Link指向一致。
• 遵循React Router v6的语法规范，使用element属性传递组件。

内容的提问来源于stack exchange，提问作者Okoro Ikenna