react-routerは手軽にルーティング機能を実装できる便利なパッケージです。今回はreact-router-domで使われがちな(使ったことのある)パッケージを紹介します。
useParams
useParamsは、URLからidなどを取得できるパッケージです。http:x-digger.com/programming/{id}として、動的に変化するidなどを取得して、idが同一か否か(そのidを含む行が存在するか否か)などを判定するのに使います。
import { useParams} from "react-router-dom";
let { id } = useParams();
if (id === undefined) {
id = "0";
}尚、javascriptだと型判定が緩いのでid=0でもエラーが出ませんが、typeScriptでは型判定が厳格なので、id=”0″とstringで指定しないと動きません。これは、useParamsが本来的にURLをstring型として認識しており、URLに含まれる部品はすべてstring型と認識するためです。id=1だとしてもこの認識はid=”1″です。ゆえに、例えばid=0とすればstring型です、とエラーが表示され、useParams<id: number>();などとすると、does not satisfy the constraint ‘string | Record<string, string | undefined>’とエラーが表示されます。もしどうしてもその後idをnumberとして扱いたいなら、parseIntを使って型変換する必要があります。
〇使い始めの頃に勘違いしていたのですが、useParamはurlからidをゲットする機能だけでなく、urlからidを取ってきて、そのidによって表示する画面をルーティングする機能もあります。なので、id===0の場合はこの画面、id>0の場合は別の画面を表示する、というような処理をuseParamを使うだけで手軽に作ることができます。
useNavigate
何かしらユーザーが操作したときに画面を遷移させます。私はreact-router@v6(現時点で最新のもの)しか扱っていませんが、v5以前ではuseHistoryとされていたものが廃止となり、useNavigateになったそうです。
import { useNavigate, useParams } from "react-router-dom";
const navigate = useNavigate()
fetch(`programming`)
.then((data) => {
if (data.error) {
console.log(data.error);
} else {
navigate("/blog") } })上記コードでは、data.errorでない場合に/blogというURLページに遷移させています。
Link
手軽にLink機能(クリックしたときに任意のURLに画面遷移する)を追加できます。これはとても便利でお手軽で、エラーが出る余地もあまりないので簡潔です。
import { Link } from 'react-router-dom';
<p><Link to="/">Top page</Link></p>
コメント