主页 / coding / 问题 / 77778627
Accepted
Michał Turczyn
Asked: 2024-01-08 17:55:01 +0800 CST

如何处理默认路径[重复]

  • 772

我在我的网站上使用 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",  
"react-router": "^6.21.1",  
"react-router-dom": "^6.21.1",
reactjs

1 个回答

  1. Best Answer

    看来您已经知道导致问题的原因，只需要重定向部分的指导。

    正如您已经提到的，代码正在按预期工作。查看您的结构，没有配置为在路径“/”匹配时呈现的子项。要解决此问题，您必须使用这两个index属性并在访问"/home"路径时触发导航。"/"

    去做这个：

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

    请注意我添加的行：

     <Route index element={<Navigate replace to="/home" />} />

    这个新路由有index属性，并且也使用了<Navigate>react-router提供的组件。

    1. index属性：此属性使该路由成为父级的默认路由，在您的情况下为“/”。

    2. <Navigate>：在您的示例中，我们无法<Home>直接渲染，因为您明确要求不要这样做：

      我无法设置路由Home组件/，因为它会完全破坏应用程序（因为App组件具有Outlet组件）。

      所以它会将每个"/"路径重定向到"/home"。

    尽管这很可能会解决您面临的问题，但我强烈建议您使用非空"/"并在那里进行路由。大多数情况下，"/" 是家，而不是"/home"。

    • 1

相关问题