ルーターの使い方を簡略化🎯

今回のAB&Bミッションでは、
画面を変換する必要がある場合は、アドレスウィンドウにurlパラメータ、クエリーを付けてページを移動させます.以前使っていたhistoryを使っていて、他の方法が分かればよかったので、もう一度見てみました.

リンク先に移動

ルータを設定するページは

を含む.

<Router path='/basicUrl" component={About}>

ここに入力すれば十分です.正確なtrue設定をしなければいいです.

リンク

<Link to = {`/basicUrl/?city='seoul`&personnel=3}>검색</Link>

リンクラベルの内部はラベルです.ただし、直接反応板にaラベルを使用すると、ページがリフレッシュされるため、リンクに移動する必要があります.

アドレスウィンドウの後ろにあるqueryStringを使用
アドレスの後ろのqueryStringに基づいて、対応する値を抽出して新しいデータを加工します.qsライブラリとロケーションオブジェクトを使用できます.

qsを使用するにはインストールが必要です.

npm i --save-dev @types/qs

import qs from 'qs'
function Example({location}){
	const query = qs.parse(location.search, {
    ignoreQueryPrefix: true,
    });
    const city = query.city
	return (
		<div>여기는 {city}입니다.</div>
    )
}

ignoreQuery Prefix:trueがここで設定されていない場合
location.検索値"?city:1で表示されます.
trueを設定するとcity:1が得られます.
値を追加で反映する場合は、パラメータアドレスの後ろに「&」を付けます.(=> {city: 'seoul', personnel: '3'})

履歴へ移動

ルータ設定

<Router path='/basicUrl/:city/:personnel' component={About}/>

history

を使用

function Example({match}){
    const info = match.params
    const city = info.city
    const personnel = info.personnel
    const goResult = () => history.push(`/basicUrl/${city}/${personnel}`)

	return (
    		<button onClick={goResult}>검색</button>
    )

matchオブジェクトを受信して使用する必要があります.
match.paramsで情報を取得できます.
historyオブジェクトは、現在のようにページを移動できます.
前のページに戻るgobackがあり、ページの移動を防ぐblockがあるので、より役に立つように見えます.

useReactRouterHook

最後にuserRealtRouterHookで、最上位にルータを設定する必要はありません.(withRouterで構成部品を包むこともできます)

import {useReactRouterHook} from 'react-router-dom';
function Example(){
	const {location, history, match } = useReactRouterHook()
    ...
    이제 위에서와 같이 사용가능함.
    ...
}

へへへ忘れないための伝言:)
歴史オブジェクトは何よりも役に立ちます.