react-ルータライブラリ

ライブラリのインストール
npm install react-router-dom
使用例

<BrowserRouter>
	<Route path="">
    		...
	</Route>
</BrowserRouter>

上記のように、urlに基づいて他のコンポーネントを分離して画面に表示することができます.path=""の後にurlを指定できますが、"/"、"/test"などの2つのルータを指定すると、最初に/が認識され、画面のみが表示されます.
そこで、exact path=""で正しいurlを貼り付けます.
あるいは<Switch>というルータラベルがあり、そのラベルに区切られたルータはurl重複部分があれば、一番上に書かれたコードを検索します.
動的urlについてさらに説明します.exact path="/test/:ex"に示すように、:~と書くと、動的urlとして定義され、/test/後に任意のコンテンツが表示され得る.
urlから見ると、/test/123213はこのようにして現れても、同じ画面が表示されます.
このダイナミックurlをうまく使えるreactive hookがあります.userParamsです.

useParams

パラメータとして動的urlに設定された値を受信できます.exact path="/test/:exに設定されている場合
routerをテストタグとするコンポーネントで

let ex = useParams(ex);

以上のように、変数として対応する変動値を取得して使用することができる.
たとえば、urlを要求する場合、動的urlを使用して、後で数値を送信するときに、その数値に一致するstateデータ値を検索し、要求データに一致する画面を表示できます.

BrowserRouter vs HashRouter

上記の2つの違いは、url値は通常、htmlファイルやapi操作をサーバに要求する手段であり、BrowserRouterを使用するとurlが直接使用されるため、要求がサーバに送信され、HashRouterを使用して防止されていると考えられる点である.
HashRouterを使用する場合、url値の前に#を付け、反応器内のDOMのhistoryを表します.locationでurlを変更するだけなので、サーバは要求されません...
実際、デフォルトurlが/reactに設定されている場合、サーバのバックエンドから/react/*に送信されるリクエストはreturnによって解決されるため、画面にreactdomのurlがブラウザの上部に表示される可能性があります.したがって、#は接続されていない通常のurlを表示するためにBrowserrouterを使うのはいいですね.여담 : api관련 일은 백엔드에 넘겨버리자~ 프론트는 그거 말고도 매우 바쁘다!! JSON 파일이나 어여어여 넘기라구!!

Link, useHistory

応答領域内でページを移動する方法は、url要求をサーバに送信せず、ページをリフレッシュしないように行うべきである.
これは、ページをリフレッシュすると、既存のストレージのstate値が初期値に初期化され、そのstateに基づいて作成された構成部品にエラーが発生するためです.
したがってreact自体が保存するhistory.locationオブジェクトのアドレス値と対応するコンポーネントhtmlは1つに維持され、内部コンテンツのみjsファイルとして再レンダリングされます.この場合に使用する機能は、リンクライブラリとuseHistory reaction hookです.
まず、リンクはreact-routerが提供する機能の一つであり、ページをリフレッシュせず、内部コンテンツのみを再表示します.

<Link to="/...">링크</Link>

<Nav as={Link} to="/..."></Nav>

次の2つの方法があります.
1つ目の方法では、他のタグを外に置くとeslintが警告します(タグ内でリンクタグを使用することは推奨されません).
この場合、as={Link} to="/..."を対応するラベルに入力する方法が用いられる.
次にuseHistoryはreactのhistoryオブジェクトを使用できるhookであり、htmlにロードされたjsコンポーネントを置き換えるのではなく、urlにリンクのようにリフレッシュしてhtmlを受信する役割を果たす.
使用方法:

let history = useHistory();

<Button onClick={()=>{history.push("/...");}}></Button>

以上のように、userHistoryを使用して履歴オブジェクトを変数に受信した後、urlに対応するコンポーネントをオブジェクトのメソッドpushでロードします.