[react/ベース]ネットゲーム学習のreact 9を作成React-router

React Router

取付react-router、react-router-dom主にHashRouter、BrowserRouterが用いられる.

<BrowserRouter>
<div>
...
</div>
</BrowserRouter>

形式でかばう.
仮想ページアドレスを接続し、ゲームファイルを接続します.
1つのページで使用できるようにします.
アドレスに移動するには、タグロールを作成する必要があります.Link素子を用いて多ページ装具として作製した.

ブラウザでaラベルとして実装される.

`'@babel/plugin-proposal-class-properties', webpack.config.jsファイル-pluginsに追加します.
devServer-historyApiFallback:真のコードを追加するとエラーを防ぐことができます.(ページ変更時にエラーが発生する場合があります)

HashRouter

真ん中に#(Hash)があります
リフレッシュによりページが実装されます(サーバは知りません)
検索エンジンに不利です.ブラウザで認識できます(ブラウザとして使用できますが、サーバの他のオプションが必要です)
動的ルーティングマッチング操作が必要です.
新しい構成部品の作成と管理を容易にし、効率的に管理できます.

GameMatcher

1つのアドレス「game/:name」に統一できます.:はparamsと呼ばれています.
動的変化住所は同じルートしか変更できません.
history:反応ルータをだます方法
match:ダイナミックアドレスルーティングに関するparams
location:path名.アドレス情報を持っています.
動的ルーティングを使用するとGameMatcherが長くなります
1つのルータで複数のゲームを変更できます.

QueryString

アドレスに値を渡す最も簡単な方法(サーバが認識しやすい).
location-search.
ページング時に必要なページを表示できます.付加情報を確認する方法として使用します.URLSearchParamsが必要です.historyapiで確認

GameMatcher -> props

render={(props) => }

プレゼンテーション方式は、propsにデータを転送するのにより適している.

Switch

複数のルーティングの最初の一致値のみをレンダリングします.
他のルーティングに一致する値があっても、画面に表示されません.

exact

アドレスと完全に一致した場合に表示されます.
上位アドレスも一致していると思われるので、"/"があれば一致する.
完全に一致しているかどうかを確認する方法が必要です.