Contacts组件无法渲染问题求助

大家好，我最近碰到一个棘手的问题：我的Contacts组件完全不渲染任何内容。我已经逐一检查了其他组件，确认它们都能正常工作，唯独这个Contacts组件出了问题。我还打开了浏览器开发者工具查看控制台，但没有发现任何错误提示。

以下是Contacts组件和App组件的代码：

Contacts.jsx #

import React from "react";

const Contacts = () => {

return (

<form>

<div className="mb-3">

<label htmlFor="name" className="form-label">

Name

</label>

</div>

</form>

);

};

export default Contacts;

App.jsx #

import { ChakraProvider } from "@chakra-ui/react";

import Contacts from "./components/Contacts";

import Navbar from "./components/Header";

import DashBoard from "./components/LandingSection";

import Projects from "./components/Projects";

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

function App() {

return (

<div>

<ChakraProvider>

<Router>

<Navbar />

<Routes>

<Route path="/" element={<DashBoard />} />

<Route path="/projects-section" element={<Projects />} />

<Route path="/contacts-section" element={<Contacts />} />

</Routes>

</Router>

</ChakraProvider>

</div>

);

}

export default App;

有没有大佬能帮我排查下问题所在？我实在找不到头绪了😭

备注：内容来源于stack exchange，提问作者Eddie Nazario