Javascript reactrouterdom v6 仅呈现默认路由

我正在使用REACTION路由DOM V6启动一个新项目，第一步中的一个步骤遇到了麻烦:为应用程序设置路由.

我刚刚创建了两个页面:AuthPage和DashboardPage，如果从浏览器导航到以下位置，我希望能够呈现这两个页面:

• 本地主机:port/:应呈现仪表板页面
• 本地主机:端口/身份验证:应呈现授权页面

但是正确地说，不，唯一呈现的页面是DashboardPage，即使我试图导航到不存在的路由.

到目前为止，我的代码如下:

Main.tsx

import { createRoot } from 'react-dom/client'
import { MemoryRouter as Router } from 'react-router-dom'
import { ThemeProvider } from '@mui/material/styles'
import { theme } from './theme'
import App from './App'

const root = createRoot(document.getElementById('root') as HTMLElement)

root.render(
  <ThemeProvider theme={theme}>
    <Router>
      <App />
    </Router>
  </ThemeProvider>
)

App.tsx

import { Route, Routes } from 'react-router-dom'
import AuthPage from './pages/AuthPage'
import DashboardPage from './pages/DashboardPage'
import NotFoundPage from './pages/NotFoundPage'
import { routes } from './routes'

function App() {
  return (
    <Routes>
      <Route path={routes.dashboard.url} element={<DashboardPage />} />
      <Route path={routes.auth.url} element={<AuthPage />} />
      <Route path={routes.notFound.url} element={<NotFoundPage />} />
    </Routes>
  )
}

export default App

Routes.ts

export const routes = {
  auth: {
    url: '/auth'
  },
  dashboard: {
    url: '/'
  },
  notFound: {
    url: '*'
  }
}