React Router, SPA,MPA

▶スパとは？

単一ページアプリケーション:単一ページアプリケーション

htmlファイルは

ページ数で存在するが(mpa方式)、反応項目では.htmlファイル

▶MPAとは？

ページ以上のアプリケーション

▶フレームワーク

他人が創造した枠組み内に入って使用する

辛ラーメン+お料理道具をご用意しております.

▶ワードベース

他の人が作ったコードを持ってきてフレームワークに書いた

ガスコンロしか提供していませんが、残りは準備します.

共通点:他人が作ったもの.

▶︎ React Router(V6)

reactバージョンは16.8以上でなければなりません.

は、異なるパス(url)に従って異なる画面を表示する.

応答は単純UIにのみ使用されるため、ルーティング機能は内蔵されていない.

ライブラリ.

「-save」はpackagejsonに追加する依存項目を明確に示す役割
import React from 'react'
→ノードモジュールのレスポンスフォルダからレスポンスを取得する

▶ルーティング構造

import { BrowserRouter as Routes, Route } from 'react-router-dom';

’as‘BrowserRouter’のテキストが長いのでRoutesとRouteと呼ぶと宣言しました.

BrowserRouterを「ルート、ルート」と書きます.
3.path='pathは{}コンポーネントに入ります.

import { BrowserRouter as Routes, Route } from 'react-router-dom';

const Switch = () => {
  return (
        <Routes>
          <Route path="/" element={<Landing />} />
        </Routes>
  );
}

1.ルーティングの親要素スイッチからルーティングに変更

<Router>は一番外側にあり、ルーティング機能を中の子供たちに提供することを意味します.<Routes>は、経路に従って変更すべき部分を(中の変更)と表記する.
Routesの外に表示画面を変えても残る部分
つまり,ページ移動時に変更しない部分はRoutesの外に置かれる.(header, footer)

  return (
    <>
      <Header />
        <Routes>
          <Route path="/" element={<Landing />} />
          <Route path="/list" element={<Landing />} />
          <Route path="/creation" element={<Create />} />
          <Route path="/roulette/:id" element={<Roulette />} />
        </Routes>
	  <Footer />
    </>
  );

2.『Route』の2つのアイテムを持つ。(path , element)

path/urlに従ってelement = {<Main />}をスクリーン上でレンダリングします.

以前はcomponentが使用されていたが、elementに置き換えられた.

では、既存の正確な値が削除されますが、複数のルーティングをサブパスに一致させる場合は、URLの後ろに*を使用して一致させることができます.次のようになります.

          <Route path="/list/*" element={<Landing />} />
          <Route path="/creation" element={<Create />} />
          <Route path="/roulette/:id" element={<Roulette />} />

Routesファイルはindexです.jsをインポートし、レンダリングします.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

StrictModeは、アプリケーションの潜在的な問題を特定するツールです.
参考資料：公式文書

3. this.props.history.push() -> useNavigate()

以前は、パラメータ受信素子としてhistory, match, locationを用いるHOCは、非ルーティング素子の場所でwithRouter()を用いる必要があった.
*HC高次構成部品:高次構成部品は、構成部品をインポートして新しい構成部品を返す関数です.

// v5
const history = useHistory();

history.push('/home');
history.replace('/home');

// v6
const navigate = useNavigate();

navigate('/home');
navigate('/home', {replace: true});

// v6 에서의 앞으로, 뒤로 가기 사용방법 변화 
<button onClick={() => navigate(-2)}>Go 2 pages back</button>
<button onClick={() => navigate(-1)}>Go back</button>
<button onClick={() => navigate(1)}>Go forward</button>
<button onClick={() => navigate(2)}>Go 2 pages forward</button>

•Link componentとuseNavigate()の違い

- Link는 조건 없이 이동, props는 함수. 조건에 따라서 호출 할지말지 결정 가능.

•Link componentとa tagの違い

- SPA의 효율을 끌어올리기 위해 <Link to="/">
- <a>는 MPA. 주소가 바뀌면 새로 요청. 전체적으로 다시 가져옴.
—> 효율성 떨어짐
- Link component는 서버에 새로운 주소를 받아오지만 파일을 새로 요청하는 것이 아님.
    - 리액트 라우터 돔에서 화면만 바꿔줌.
    - 위에 메뉴바는 그대로 냅두고, 내용물만 바뀌는 경우 씀.
    - Link 는 'to'라는 props 1개를 받고, 이동하는 경로를 넣으면 됌.
- 실제로 새로운 파일을 다운 받아야 하는 경우, a tag를 씀.
    - 완전히 외부 링크로 갈 때, <a> 태그

参考資料：react-router

🚫 今日のミス

会社は反応初期設定を行い、Nav、Footerを適用しようとしたが、エラーが発生した.
3時間以上捕まえたようです.

ルータ内に他のルータのエラーはありません.
しかし、私はRouterを発表していません...?
アプリを見てみましたjsとroutes.jsは両方ともBrowserRouterで包まれています.ううう
忙しいのに楽屋に行って原因を闻いてみた.
気まずくて超感动...呜呜...
実際、この文章はreact-routerの更新前にrouterに関する文章を学ぶためです.
今、v 6に更新して整理し直しました.
今使っているのはjira、flow、zenkins、bitbucketなどです.
今まで使ったことのないツールなので、難しいです.ううう
一番大切なのはAWS...ㅠㅠS 3についての知識を学ぶ.
Zenkinsを使う理由->CI/CDも一緒に勉強します.
今週理解できるように勉強するつもりです.
私を理解して欲しい🙏..
間違いを知っているところがあればいつでもメッセージをお願いします!