【React】react-routerのhooks

react-routerのhooksの種類

useHistory

• ページ遷移させるときに使用するhistoryオブジェクトを取得できる

.ts

const history = useHistory();

history.push('/');
history.goBack();

useLocation

• 現在のページのURLのpathやqueryなどを取得できる

.ts

const location = useLocation();

location.path
location.search

useParams

• URLパラメータを取得できる
  • <Route path="/sample/:name"> と定義したページにアクセスした際に下記の記述で :name の値を取得できる

.ts

const { name } = useParams();