⭐任務說明

React Router 也有提供 Hook！讓我們一起來看看！

簡單介紹

useParams

• URL 中傳回與 Route path 相符的動態參數的物件，其中子路由會繼承父路由的所有參數。

• 上一個任務中的程式碼中就有使用到

  • router 的部份，會以 : 為開頭代碼資料是動態傳入

const routes = [
  {
    path: "/",
    element: <HomePage />,
    errorElement: <h1>此頁面不存在R！</h1>
  },
  {
    path: "/productList",
    element: <ProductPage />,
    children: [
      {
        path: "products/:productId"
      }
    ]
  }
];

`useLoaderData

• 需要先在路由中增加loader，我們預期會取得資料

useLocation

• 可以取得當前 URL 路徑中的資料

function CurrentLocation() {
  const { pathname, search } = useLocation();

  return (
    <div>
      <h2>Current Location:</h2>
      <p>Path: {pathname}</p>
      <p>Search: {search}</p>
    </div>
  );
}

// 路由
const routes = [
  {
    path: "/doquery?",
    element: <CurrentLocation />
  }
];

結語

下個任務見！