react-router-domに関する備忘録（2022/07現在）
React勉強中、リンク関係を実装したいと考え調べた。
色々と情報は出たものの、v5の情報が結構多くてエラーにより混乱したのでv6（現在）の情報を自分が調べた分をメモするついでに書いておく。
また、v5までの記述法を理解してないので、比較はできない。
v5との違い
<Router>の削除
v5までは<Router>で囲んでいたようだが、v6ではなくなっている。
他ファイルを引っ張る形のプログラムを見てないので判断しづらいが、かなり大きい変更に見える。
<Switch>などの関数名の変更（要検索）
見る限り、<Switch>などのURL設定や<Link>などの関数記述方法は変わってないようだ。
ただ、関数名が変更になっているので注意。
v6での記述（一例）
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path={"/"} element={<Home />} />
<Route path={"/info"} element={<Info />} />
<Route path={"/works"} element={<Works />} />
</Routes>
</BrowserRouter>
);
}
自作中のプログラムの一部である。v5でのサンプルファイルの<Switch>以下の部分が上記に該当すると考えられる。
v5のサンプルファイル抜粋
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
また、v5ではHome.jsのreturnを<Router>で囲むかもしれないが、v6では囲んでいない。
以降も調べると思うので、違いがわかり次第更新する。
fetch関数の備忘録
fetch関数とは
簡単に言うと、「公開されているAPIから、画像やデータを取得する」というもの
そこら辺の説明はいろんな人がわかりやすく説明してくれているので省略する。
【JavaScript】初めて学ぶ！fetch()メソッドと非同期通信 | BREEZE
基本的な使用例
fetch('取得したい外部APIのURLを記入する')
.then(response => response.text())
.then(text => {
console.log(text);
});
fetch()の返り値はPromiseを用いているため、Promiseがわからない場合は先にそちらを学んでほしい。ほとんどのwebサイトで.then()についても同時に説明されている。
【JavaScript】初心者にもわかるPromiseの使い方｜TECH PLAY Magazine ［テックプレイマガジン］
以下、自身がよくわからなくて詰まっていた箇所を書いていく。
「○○.status」とは？
勉強していくうちに、「if(○○（作成者それぞれの関数定義）.status === "success")」というコードを見るようになった。
帰ってきた内部データを参照しているのはわかるのだが、statusが何を参照しているのかわからない。
fetch("外部APIのURL")
.then(response => response.json())
.then(data => {
if(data.status === "success"){
処理
}
}
というわけで調べたら、○○.statusにはHTTPステータスコードが入っていることがわかった。
以下URL先にfetch関数返り値の他プロパティも記載されているのでよかったらどうそ。
【JavaScript基礎】Fetch APIの基礎 - KDE BLOG
