# React router 動態處理頁面變更
###### tags: `React` `router` `React-router-dom`

寫過 vue router 並開始寫 react router 的時候發現，定義頁面的時候沒有 name 可以定義，所以當我要換頁時只能透過 path 來決定要換的頁面

一開始要操控換頁的寫法是:

<Link to=`/routerTry/catsArea/${params.catId}/comments`>
    Load comments...
</Link>

直接把定義的路由再寫一次上去。
這樣當我頁面、層級一多，命名變得更複查的時候不就要一直翻看 Route 所定義的 path，不小心要改個 path，有用到的地方都要一個個去改。

### 使用 `useRouteMatch` 改寫

當初的範例做修改後：

import React, { Fragment } from 'react';
import { useRouteMatch } from 'react-router-dom';

export default function CatDetail() {
    
    // 基本設置
    const match = useRouteMatch();
    console.log(match)
    
    // 舒服
    return (
    <Fragment>
        <Link to={`${match.url}/comments`}>
            Load comments...
        </Link>
    </Fragment>
    )

}

#### 印出 `match` 會看到裡面有完整的 `path` 以及 `url`

上述範例我們使用了 `url`，那什麼時候會用到 `path` 呢？
如果今天在元件裡定義一段路由的話 `path` 就可以用上場了，例如：

import React, { Fragment } from 'react';
import { Route, Link, useParams, useRouteMatch } from 'react-router-dom';

export default function CatDetail() {
  const params = useParams();
  const match = useRouteMatch();
  return (
    <Fragment>
      <Route path={`${match.url}`} exact>
        <Link to={`${match.url}/comments`}>Load comments</Link>
      </Route>
      
      // 原先在元件裡定義的 comment 路由
      <Route path={`/routerTry/catsArea/${params.catId}/comments`}>
          comment...
      </Route>
      
      // 可以使用 useRouteMatch 裡的 path 做修改
      <Route path={`${match.path}/comments`}>
         comment...
      </Route>
    </Fragment>
  );
}

在 <Route> 使用 `match.path` 是因為今天是要定義一段路由，
如果是要 Link 到一段路由的話就可以使用 `match.url`。