【react-router-dom】現在のページのURLのparamsを参照できるuseParamsをざっくり紹介【React】

useParams

URLからparamsを受け取って、値を取得することは多々あると思います。

今回はそんな場面で使えるuseParamsをご紹介します。

いくつか方法があるかと思いますが、一番シンプルに値を取得できるやり方なのではないでしょうか。

実装方法

こちらがuseParamsの実装例です。公式ドキュメントよりお借りしました。

useParamsをインポートし、ファクション内で、変数に代入して、そのparamsの値を文字列に入れて表示させるといったものになっています。

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

参考