下面的代码显示了我在react中的工作，我刚刚开始我的项目，我在这方面还是很新的。我有一个简单的问题，我只是不能理解。它可能是由一些简单的东西。我希望与文本Hi的h1也得到渲染或得到foo作为输出，但我的网站没有显示任何文本
App.js

import './App.css';
import Navbar from './Components/Navbar';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (

    <div className='App'>
      <h1> Hi </h1>

      <>

      <Router>
        <Navbar/>
          <Routes>
          <Route path='/' exact/>
          </Routes>
      </Router>
      </>
    </div>
  );
}

export default App;

Navbar.js

import './Navbar.css';
import React, {useState} from 'react'
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav className='navbar'>
        <div className='navbar-container'>
            <Link to="/" >foo</Link>
        </div>
    </nav>
  )
}

export default Navbar;

index.js

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

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

经过进一步的测试，它已经表明，当我删除App.js的返回函数中的所有内容时，除了h1 Hi之外，都会呈现。