Background

工作以來一直沒有好好花時間來理解路由這塊，趁著最近剛好遇到一個需要用到 useRouteMatch 這個 Hook 的需求，來寫一些關於 React-Router 的主題。

什麼是 match ？ match 提供了哪些資料？

官方文件上寫到 match 是一個 Object 包含 <Route path> 如何和 URL 匹配的訊息。

<Route path={"/boyband/:bandId"}>

match Object 包含四個 property

{
    isExact: true,
    path: "/boyband/:bandId", // 同 Route 上定義的 path
    url: "/boyband/5566", // url 和 path 匹配的部分
    params: {bandId: "5566"} // 從 url 上解析出來的參數
}

如何取得 match ?

React Router v5 之後可以直接使用 custom-hook

import { useRouteMatch } from 'react-router-dom'
const match = useRouteMatch()

參考資料

match
The Hooks of React Router