React Route无法正常工作，页面仅显示空白界面求助

确定问题出在路由上，移除路由后Navbar能正常显示。参照编程训练营的示例开发，但未发现两者差异。以下是相关代码：

App.jsx 代码 #

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Navbar } from "./compnents/navbar";
import { Home } from "./views/Home";

export const App = () => {
  return (
    <>
      <header>
        <Navbar />
      </header>
      
      <main classNameName="container mt-4">
  
      <BrowserRouter>
            <Routes>
              <Route exact path="/" element={<Home />}/>
            </Routes>
      </BrowserRouter>
    
      </main>
    </>
  );
}

main.jsx 代码 #

import ReactDOM from 'react-dom/client';
import { App } from './App';
import './index.css';
import { BrowserRouter } from 'react-router-dom';


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

Home.jsx 代码 #

export const Home = () => {
    
    return (
        <>
        <h1>Hello!</h1>
        </>
    );
}

• 核心问题：重复嵌套BrowserRouter：main.jsx中已用BrowserRouter包裹整个App组件，App.jsx内部再次嵌套BrowserRouter会导致路由上下文冲突。若Navbar使用了react-router-dom的路由钩子（如useNavigate、useLocation），它会读取外层路由上下文，而内部Routes属于独立的路由上下文，两者不匹配引发渲染异常。
• 额外问题：App.jsx中main标签的属性写错，应为className而非classNameName，会导致样式失效。

修改后的App.jsx代码：

import { Route, Routes } from "react-router-dom";
import { Navbar } from "./compnents/navbar";
import { Home } from "./views/Home";

export const App = () => {
  return (
    <>
      <header>
        <Navbar />
      </header>
      
      <main className="container mt-4">
        <Routes>
          <Route path="/" element={<Home />}/>
        </Routes>
      </main>
    </>
  );
}

修改说明 #

1. 移除App.jsx中的BrowserRouter导入与组件，仅保留main.jsx中的外层BrowserRouter即可。
2. 修正main标签的className拼写错误。
3. React Router v6中Route默认精确匹配，无需exact属性，直接删除即可。

内容的提问来源于stack exchange，提问作者Selena Mead