reactjs - react 路由器索引路由不显示为默认

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 属性都是可选的，但不要同时使用它们。 path="home" 属性覆盖了 index 属性。

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

例子:

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