如何处理默认路径

Question

我在我的网站上使用 React Router，遇到了以下问题。我已定义我的主要应用程序组件如下：

import './App.css'
import { Navbar } from './Navbar'
import { Outlet } from 'react-router'

function App() {
    return (
        <div>
            <Navbar />
            <Outlet />
        </div>
    )
}

export default App

然后我使用这个组件作为基本路线：

<BrowserRouter>
    <Routes>
        <Route path="/" element={<App />} >
            <Route path='home' element={<Home />} index />
            <Route path='about' element={<About />} />
        </Route>
        <Route path="*" element={<Navigate to="/Home" replace />} />
    </Routes>
</BrowserRouter>

一切正常，我可以导航主页和关于页面，但是当我导航到

/

时，它会出现带有

Navbar

的空白页面，这是可以理解的，但我不知道如何显示我的默认主页。我可以以某种方式指示 React 重定向到

home

吗？我无法为

Home

路线设置

/

组件，因为它会完全破坏应用程序（因为

App

组件具有

Outlet

组件）。

库版本：

“react-dom”：“^18.2.0”，
“反应路由器”：“^6.21.1”，
“react-router-dom”：“^6.21.1”，

Answer 1

您可以提供您正在使用的react-router版本吗？