210709 React Router

3912 ワード
テキストリンク

ルータの設定


ルーティング:ページ分割、react-router-domライブラリ使用
npm install react-router-domまたは糸react-router-dom
次のインデックス.jsに移動
import { BrowserRouter } from 'react-router-dom';
インポート後、
    <BrowserRouter>
      <App />
    </BrowserRouter>
これにより、BrowserRouterコンポーネントはAppコンポーネントを迂回することができます.
-接続されているurlに応じて、異なるページを表示できます.
HashRouter:「アドレス」ウィンドウに#を追加します.接続がより安全です.#後ろに書いてあるのはサーバーに転送されないからです.

デフォルトのルーティング


ページを分けましょう.
要求:/detailなら、詳細ページを表示してほしい!
      <Route path="/">
        <div>main page</div>
      </Route>
      <Route path="/detail">
        <div>detail page</div>
      </Route>
RouteコンポーネントでこのようにHTMLを整理すれば、ページングできます.
Routeラベルにコンポーネントを含めることもできます.
<Route path="/detail" `component={컴포넌트명}`>
(構成部品を使用してメンテナンスする必要があるようです)
✔接続✔

✔接続先

detailpageという文字が表示されます
一緒にホームページに載せる理由は?
それはすべての一致するものを示しているからです.
localhost:3000/ path="/">と書きます.
ホームページはpathが完全に「/」の場合にのみ表示されます.
注意事項
ページごとに違うHTMLファイルがあるわけではありません!!localhost:3000/detailファイル
HTML内部の内容をすばやく変換し、ページが移動しているように見えます.
[Lv-1]私は同じ数字が好きではありません.
[BOJ]1720:数字の和