整整睡了一天 還是咳嗽咳個不停 頭重腳輕
確診真的是滿不舒服的 之後要是幸運完賽後 應該會重新編輯內文吧(品質慘不忍睹XD

在首頁下渲染其他路由組件 index 搭配 <Outlets>

如果要在 '/' 路徑下 render 某個特定 Route 組件，用 index 搭配 <Outlets>
舉例來說，在 Home component 下 render Messages component
用 <Route> 巢狀包住另一個 <Route>

App.js

import "./styles.css";
import { Routes, Route } from "react-router-dom";
import NoFound from "./NoFound";
import Home from "./Home";
import Messages from "./Messages";
import History from "./History";
import Blog from "./Blog";

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="*" element={<NoFound />}></Route>
        <Route path="/" element={<Home />}>
          <Route index element={<Messages />} />
          <Route path="/history" element={<History />} />
        </Route>
        <Route path="/blog" element={<Blog />} />
      </Routes>
    </div>
  );
}

在 Home.js 則要記得添加 <Outlets>

import { Outlet } from "react-router-dom";
export default function Home() {
  return (
    <>
      <h1>Welcome to the home page :D</h1>
      <Outlet />
    </>
  );
}

這時候就可以看到 Home component 下 render 出 Messages component

而不是 index 的 <History /> 路由到 /history 則會看到被嵌套在 <Home> 裡面

codeSandBox 在這裡
可以實際玩看看會比較知道到底在做什麼xd

useNavigate 用程式路由到指定位置

參考資料

https://reactrouter.com/en/v6.3.0/api#outlet