反应路由器索引路由不显示为默认值

Question

我有一个非常简单的页面应用程序，索引路由不适用于它。

import { Routes, Route, Outlet } from 'react-router-dom';
import Home from './routes/home/home.component.jsx'
import Heading from './components/Heading';

function Header () {
  return (
    <>
      <Heading />
      <Outlet />
    </>

  )
}

function App() {
  return (
    <Routes>
      <Route path='/' element={<Header />} >
        <Route index path='home' element={<Home />} />
      </Route>
    </Routes>
  );
}

export default App;

这是默认显示的内容，仅显示没有主页索引元素的导航栏：

我的问题是为什么会发生这种情况以及当我的代码基本上不存在并且我看不到我在哪里犯了错误时如何解决这个问题

谢谢！

Answer 1

虽然index和path属性都是可选的，但不要同时使用两者。proppath="home"覆盖了indexprop。

如果您希望组件在两者Home上渲染，那么您将需要两条路线。一个指定为索引路由并在父路由的路径上渲染，另一个在嵌套路径上渲染。"/" "/home""/""/home"

例子：

function App() {
  return (
    <Routes>
      <Route path='/' element={<Header />} >
        <Route index element={<Home />} />
        <Route path='home' element={<Home />} />
      </Route>
    </Routes>
  );
}