未経験エンジニア備忘録 1日目

おはようございます。

4月の半ばからベンチャー企業でエンジニアとして働き始めました。
約2ヶ月ほど経過しましたが、まだまだわからないことだらけで四苦八苦する日々です。

これからnoteでは普段の業務で新しく覚えたことや、業務外で勉強している技術について学んだこと、何をやったのか、を残していきたいと思います。

ということで早速、今日の朝からやっていたこと振り返ります！

今日やったこと・学んだこと

・React  useHistoryを使ったページ遷移
・分割代入の便利さに気づく
・useLocation を使用した情報の受け渡し
・存在しないURLにアクセスしたときの404ページの作成
・Githubの書籍を読む

useHistoryでのページ遷移

import { useHistory } from "react-router-dom";

 const history = useHistory();
 const onClickDetail1 = () => {
   history.push("/page1/detailA");
 };
 
 return <button onClick={onClickDetail1}>page1Detailへ</button>
};

react-router-domから useHistoryをimportし、history変数に格納する。
historyに対してpush()を用いて、引数に遷移したいパスを記述することで、
ボタンをクリックすると、"/page1/detailA"のパスへ遷移します！

useHistoryの関数は他にもありgoBack()関数を使用すると前のページに戻ることが可能になる。

分割代入の便利さに気づく(情報の受け渡し)

Reactでもよく使われる分割代入。

const { state } = useLocation();

このように記述し、配列やオブジェクトの情報を別コンポーネントでも使用できるようになります。
今回の場合は下記の中で指定した"state"とう配列を持ってきてuseLocation
を用いてデータを受け渡すことができました。

export const Page1 = () => {
 const arr = [...Array(100).keys()];
 console.log(arr);
 
return (
   <div>
     <h1>Page1です</h1>
     <Link to={{ pathname: "/page1/detailA", state: arr }}>Page1DetailA</Link>
     <br />
     <Link to="/page1/detailB">Page1DetailB</Link>
     <br />
     <button onClick={onClickDetail1}>page1Detailへ</button>
   </div>
 );
};

404ページの作成

実際に存在しないURLがないページにアクセスしたとき、なにも設定しなければ真っ白のページが現れてしまいます。
これでは使う人にとっても良くないので
「このページは存在しませんよ〜」
と教えてくれるのが404ページです。
なんで404ページっていうんだろ。
Routerの設定で

path=“/*”

と設定してあげれば404ページを作成できます。