以下代码在路由器应用程序中出现某种错误。js

import Home from './pages/Home.js'
import Invites from './pages/Invites.js'
import {createBrowserRouter,
  createRoutesFromElements,
  Route,
  Link,
  RouterProvider,
  MemoryRouter} from 'react-router-dom'
import './App.css';

const Root = () =>{
  return(
    <>
      <h1>Is it working?</h1>
    </>
  )
}

function App() {
  const router = createBrowserRouter(createRoutesFromElements(
      <Route path="/" element={<Root />} >
        <Route index element={<Home />} />
        <Route path="/invt" element={<Invites />} />
      </Route>
    )
  )
  return (
    <>
      <RouterProvider router={router}/>
      <div className="App">
        <MemoryRouter>
          <Link to="invt">Invitations</Link>
        </MemoryRouter>
      </div>
    </>
  );
}

export default App;

<Root>和标记<div className="App">的内容呈现，但<Home>没有呈现。当我点击“邀请”链接时，什么也没有发生。当我手动导航到“localhost：3000/invt”时，<Invites>也不会呈现。Home和Invites是目前仅用于测试路由器的最小页面。
我希望<Root>一直呈现，<Home>呈现在“localhost：3000”，<Invites>呈现在“localhost：3000/invt”。当我点击<Link to="invt">之间的文本时，还期望输入“localhost：3000/invt”。这一切都没有发生。
PS：我使用的是react-router-dom 6。10一定很重要，因为我尝试遵循的每个教程都与以前的教程非常不同，并导致一些新的奇怪错误。