React Router urlパラメータ 取得 & 型指定（TypeScript）

# はじめに
React Router で指定したルーティングのパラメータを取得方法に関して学習したのでまとめてみました。
*学習ノート
*[ドキュメント](https://reactrouter.com/web/)に全ては載っています。

## コンポーネントでpropsでURLの一部の情報を受け取る
ルーティングにマッチした際に表示するコンポーネントでpropsとしてURLの一部の情報を受け取ることができる。



```jsx:Routing.jsx
import React from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'

// page
import Top from './views/pages/top/Top'
import { Child } from './views/pages/Child'

import { hot } from 'react-hot-loader'

const Routing = () => {
  return (
    <Router>
      <Switch>
        <div>
          <Route exact path="/" component={Top} />
          <Route exact path="/users/:id" component={Child} />
        </div>
      </Switch>
    </Router>
  )
}

export default hot(module)(Routing)

```

```jsx:Child.jsx
import React from 'react'

export const Child = (props) => {
  console.log(props)
  return (
    <div>
      {props.match.params.id}　=> :id部分を表示することができる
    </div>
  )
}
```
*Topコンポーネントはあまり重要じゃないので記載していません

### コンソールログの結果
`users/1`で遷移した場合
Child.jsxで設置したconsole.logをみてみると以下のような結果が出ます。

```console
{history: {…}, location: {…}, match: {…}, staticContext: undefined}
history:
　~~~~省略~~~~
　location: {pathname: "/users/1", search: "", hash: "", state: undefined, key: "*****"}
　~~~~省略~~~~
　__proto__: Object
location:
　~~~~省略~~~~
　pathname: "/users/1"
　search: ""
　state: undefined
　__proto__: Object
match:
　isExact: true
　params: {id: "1"}
　path: "/users/:id"
　url: "/replies/1"
```

## コンポーネントでpropsでURLの一部の情報を受け取る(型指定）
先ほどのコードに、型指定を追加したいと思います。

型指定を行う際にはreact-routerの型定義がされている@types/react-router-domをインストールする必要がある。

```terminal
npm install @types/react-router-dom
or
yarn add @types/react-router-dom
```

そして、Childコンポーネントにて`RouteComponentProps`をインポートし、パラメータの型定義を追加する。（今回だと`:id`なので`id: string`としている）

```tsx:Child.tsx
import React, { useEffect } from 'react'
import { RouteComponentProps } from 'react-router-dom'

interface Props extends RouteComponentProps<{ id: string }>{}

export const Child = (props: Props) => {
  console.log(props)
  return (
    <div>
      {props.match.params.id}　=> :id部分を表示することができる
    </div>
  )
}
```

## useParamsを使用して取得する*（React v16.8以上）
useParamsとは
> useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current Route
Google翻訳：　useParamsは、URLパラメータのキーと値のペアのオブジェクトを返します。現在の<Route>のmatch.paramsにアクセスするために使用します
引用：　https://reactrouter.com/web/api/Hooks/useparams

こちらはReactのバージョンが16.8以上の場合使用することが可能です。
useParamsを使うと、URLのパラメータを取得できる&型指定も楽にできました。
パラーメータ部分のみの取得を行いたい場合はこちらでもいいのかなという所感です。

```tsx:Child.tsx
import React, { useEffect } from 'react'
import { useParams } from 'react-router-dom'

export const Child = () => {
  const urlParams = useParams<{ id: string }>()
  console.log(urlParams.id) => :idの値を表示することができる
  return (
    <div>
      {urlParams.id}　=> :id部分を表示することができる
    </div>
  )
}
```

## 終わりに
URLの情報を取得にあたって、複数方法があることを知りました。
正直どれがベストという答えを出すことはできませんでした。

ディープな使い方をする際は〜の方法で行った方がいいとかあると思います。
バックエンドを含めて型定義したい場合はこうするなどまだまだ学習するポイントはありそうです。

## 参考文献
[React Router web用 ドキュメント](https://reactrouter.com/web/guides/quick-start)
[React Router ドキュメント useParamsについて](https://reactrouter.com/web/api/Hooks/useparams)
[サルでもわかったreact-router v5【サンプルの読解と実践】](https://qiita.com/Ikko_Kojima/items/ab1fa2677fd7b5707dd5)