React - SPA, router

SPA

traditional web application

• ページを変更するたびに、サーバに新しいページを要求する必要があります.
• リクエストは、新しいHTMLを受信して再ロードされ、変換速度が遅くなります.

single page application

• トップページはHTML形式でロードされますが、その後、AJAX(変更のみリフレッシュ)が要求され、すべてのコンテンツを再ロードせずにコンテンツがリフレッシュされます.
• のWebサイトはますます複雑になり、ユーザーとのインタラクションがますます多くなり、すべてではなく一部だけをロードしてより効果的になります.
欠点は
• JSファイルに大量の情報が含まれて重くなり、最初の遅延時間が長くなることです.

Router

案内人Router

npm install react-router-domでインストールし、ルーティング構造に従って配置します.

React Routerキー素子

• router: <BrouserRouter>
• route matchers: <Switch> <Route>
• route changers: <Link>

twitterの作成の実践で与えられたdefaultは、このような構造を有する.

/
├── /Twittler React Router 
│   ├── README.md   
│   ├── /public                        # create-react-app이 만들어낸 파일, yarn/npm start로 실행할 시에 쓰입니다
│   └── /src                           # React 컴포넌트가 들어가는 폴더
│        ├── static                    # dummyData가 들어가는 폴더      
│        │    └── dummyData.js    
│        ├── Pages                     # 페이지를 표시하는 컴포넌트가 들어가는 폴더
│        │    ├── About.css
│        │    ├── About.js 
│        │    ├── MyPage.css 
│        │    ├── MyPage.js 
│        │    ├── Tweets.css
│        │    └── Tweets.js 
│        ├── App.css
│        ├── App.js  
│        ├── Footer.js       
│        ├── index.js
│        └── Sidebar.js
├  package.json
└ .gitignore  

Sidebarで<Link>を介してパスが変更された場合、変更されたアドレスに従って、コンテンツを含める部分で<Switch>と<Route>を使用して、対応するページを表示するコンポーネントに一致します.

各コンポーネントはABCであり、それぞれ異なるjsファイルに含まれている.

classNameはほとんど指定されますが、ルータドームのLinkまたはNavLinkはaタグに変換されます.

¥import給油