react-router-domの動作原理

3098 ワード

React テキストリンク

ルーターは2種類あります。

Browserルータ

Hashルータ

両者の違いはurlの外観であり,Browser RouterのURLは通常のサイトと同じである.
Hash Router(exなど)localhost:3000/#/movieの場合、URLの後ろに#タグが付けられます.

react-router-domはコンポーネントの集合です。

react-router-domのコンポーネントが行う作業

ここに表示されているurlを見つめています.そこのサイトが変わって、何を展示するか決めました.

import {
    BrowserRouter as Router,
    Routes,
    Route
}from "react-router-dom";

まず、次のコードを挿入します.

function Movie() {
    return (
        <Router> {/*router를 만든다 */}
            <Routes> 
            <Route path="/movie" element={<Detail/>}/>
          </Routes>
          <Routes> {/*switch 가 react-router-dom이 버전 6으로 업그레이드 되며 routes로 바뀜 */}
            <Route path="/" element={<Home/>}/>{/*router 안에 route를 만들어서 user가 "/"url에 있는 경우 home route를 렌더링 해준다*/}
          </Routes>
        </Router>
      );
}

まずルータをレンダリングします.中にはプレイヤーに見せたいものが入っています.userが存在するurlに従って移動します.
componentは、1つのRouteのみをレンダリングするために使用されます.
ホームコンポーネントをパス/の場所に表示します.

リンクは、ブラウザをリフレッシュすることなく、ユーザーを他のページに移動できるコンポーネントです。

Reference

この問題について(react-router-domの動作原理), 我々は、より多くの情報をここで見つけました https://velog.io/@yoongja/React-router-dom-의-작동방법

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

チェーンテーブルランダムポインタコピー

HTML CSオブジェクト