react router 6.6 useFetcher

とりあえずベースと補足

export default SomeComponent :React.FC = () => {

	const fetcher = useFetcher()



	React.useEffect(() => {

		if (fetcher.state === "①" && !fetcher.data) {

			②

		}

	}, [fetcher])



	return <>{fetcher.data && fetcher.data.map(() => /****/)}</>

}

上記の①の箇所には「idle」、「submitting」、「loading」のいずれかが入る。

②の箇所の使い方に関しては「GET」、「POST」で使い方が変わってくるのでこれを紐解いていく。

GETの場合

if (fetcher.state === "idle" && !fetcher.data) {

	fetcher.load('/test')

}

「fetcher.loading('/somepath')」で state が loading になり loader の実行が完了したら idle へと戻り fetcher.data に data が納められる。

POSTの場合

submitting state を発生させるには別途 component 内で「fetcher.form」を使用して form を形成するか click や submit イベントハンドラで「fetcher.submit('/somepath')」する必要がある。

fetcher.submit({test: 'this is a pen.'}, {

	method: 'post',

	action: '/otherpath'

})