React Router不显示组件：单页应用404页面配置问题排查

你的代码问题出在react-router-dom v6的Route组件用法错误，v6版本要求Route必须通过element属性指定要渲染的内容，而非直接将组件作为Route的子元素，这就是页面空白的核心原因。

修正后的代码示例 #

import { BrowserRouter as Router, Route, Routes} from "react-router-dom";

export default function App() {
  return (
    <>
      <Router>
        <Routes>
          {/* 正确写法：用element属性包裹首页所有组件 */}
          <Route 
            path="/" 
            element={
              <>
                <Navbar/>
                <Home />
                <Experience />
                <Skills />
                <Projects />
                <Contact />
                <Floaters />
                <Cursor />
              </>
            } 
          />

          {/* 404页面同样使用element属性 */}
          <Route path="*" element={<NotFound/>} />
        </Routes>
      </Router>
    </>
  );
}

关键说明 #

• 不需要把所有组件合并成单个组件，只需用<>（Fragment）将首页的多个组件包裹后，传给Route的element属性即可。
• path="*"的Route会匹配所有未被前面Route命中的路径，能正确渲染404页面。

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