[TIL]学習日記6

SPAを応答ルータとして開発

SPA

Single Page Application. 名前の通り、単一ページのアプリケーションです.
1ページは単なる画面ではありません.異なるアドレスに異なる画面のルーティングを表示することで、異なる画面を表示することができます.この反応ルータライブラリを勉強しましょう.
SPAの欠点:アプリケーションの規模が大きいほどJavaScriptファイルは大きくなります(ページをロードすると、実際にユーザーがアクセスしない可能性があるページのスクリプトがロードされるため).普通の圧搾機では情報が収集できません.
(ただし、この2つの問題はサーバ側レンダリングで解決できます)

はんのうルータ

反応器を設定する場合は、糸add react-rourt-domで設定します.
プロジェクトにルータを適用する場合は、次の操作を行います.
index.jsでBrowserRouterというコンポーネントを使用する

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom' ;
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

「Route」構成部品を使用して、ルールのあるパスに表示する構成部品を定義します.アドレス規則を配列に設定すると、同じ構成部品を複数のパスに表示できます.

<Route path="주소규칙" component={보여 줄 컴포넌트} />

アプリケーション名exceptのpropsがtrueの場合、一致するアドレス規則による問題を回避できます.
(たとえば、/aboutパスに入ると、/aboutパスが/ルールに一致し、2つの要素が同時に表示されます)

<Route path="/" component={Home} exact={true}/>
<Route path="/about" component={About}/>

リンクエレメントをクリックすると、他のアドレスに移動します.aラベルとは異なり、ページの切り替えを防ぐ機能が内蔵されています.

<Link to = "주소">내용</Link>

URLパラメータとクエリー

パラメータの例:/profile/veloper
クエリーの例:/about?details=true
通常、パラメータは、特定のアイデンティティまたは名前を使用してクエリーするために使用されます.
クエリーは、キーワードを検索したり、ページを渡したりするために必要なオプションです.
パラメータの例:

import React from 'react'
const data = {
 (...생략...)
}
const Profile = ({match}) => {
    const { username } = match.params;
    const profile = data[username]
    if (!profile) {
        return <div>존재하지 않는 사용자입니다.</div>
    }
    return (
        <div>
            <h3>
                {username}({profile.name})
            </h3>
            <p>{profile.description}</p>
            <WithRouterSample/>
        </div>
    )
}
export default Profile;

URLパラメータを使用すると、ルーティングとして使用されるコンポーネントのmatchというオブジェクトのparams値が参照されます.matchオブジェクトには、現在の構成部品がどのパスルールで表示されているかに関する情報が含まれます.
Appを使用します.jsに上記の例jsをインポートした後、以下の3行目に示すようにルーティングを定義します.
App.jsのルーティングに/:usernameが書き込まれている場合、プロファイルのusername変数.jsをインポートできます.
(profile.jsのmatch.params)

<Route path="/" component={Home} exact={true}/>
<Route path="/about" component={About}/>
<Route path="profile/:username" component={Profile} />

URL照会

URL検索は?detail=true&other=1は文字列です.文字列をオブジェクト形式に変換する必要があります.qsライブラリが使用されます.取り付けるには、糸addqsに設定できます.

const About = ( {location} ) => {
    const query = qs.parse(location.search, {
        ignoreQueryPrefix: true // 문자열 맨 앞의 ?를 생략하는 코드
    });
    const showDetail = query.detail === 'true'; // 쿼리의 parse결과 값은 문자열이다.

割り当てるときは、データ型(bool)ではなく文字列であることを覚えておいてください.

サブルート

これは、ルーティング内部で別のルーティングを定義することを意味する.なんでもない!
ルーティングとして使用される要素の内部に別のルーティング要素を使用するだけでよい.

history

ボタンを押すと、後退したり、ログインして画面を切り替えたり、他のページにジャンプしたりすることを避ける必要があります.
例:

import React, {Component} from 'react';

class HistorySample extends Component {
    handleGoBack = () => {
        this.props.history.goBack();
    }
    handleGoHome = () => {
        this.props.history.push('/');
    }
    componentDidMount() {
        this.unblock = this.props.history.block('정말 떠나실 건가요?')
    }
    componentWillUnmount() {
        if (this.unblock) {
            this.unblock();
        }
    }
    render(){
        return (
            <div>
                <button onClick={this.handleGoBack}>뒤로</button>
                <button onClick={this.handleGoHome}>홈으로</button>
            </div>
        )
    }
}
export default HistorySample;

大切そうなものしか書いてないんだけど….本を読んだほうがいいと思います.