javascript - React-router-dom v6 仅渲染默认路由

Question

我正在使用 React Router Dom v6 开始一个新项目，但我在第一步中遇到了麻烦:为应用程序设置路由。

我刚刚创建了两个页面:AuthPage 和 DashboardPage，如果我从浏览器导航到:

• localhost:PORT/:应该呈现 DashboardPage
• localhost:PORT/auth:应该呈现 AuthPage

但是，即使我尝试导航到不存在的路线，唯一呈现的页面是 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>
)

应用程序.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

路线.ts

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

Answer 1

使用BrowserRouter而不是MemoryRouter:

import { createRoot } from 'react-dom/client'
import { BrowserRouter } 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}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ThemeProvider>
)