[21/09/23-24]Junzzi Editorプロジェクトの設定-(3)head、router設定、webpackエラー、export(エクスポートモジュール)

23435 ワード
今日の開発 テキストリンク

react-helmet


タイトルのライブラリを管理します.
seoフレンドリーのためにはheadタグに情報を追加する必要があります.使いやすくするために、反作用ヘルメットを使用しています.
次のように設定できますが、
// webpack plugin에 의해 새롭게 만들어진 html 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Juunzzi Editor</title>
  <script defer src="main.js"></script></head>
  <body>
    <div id="root"></div>
  </body>
</html>

// src/containers/App/index.tsx
import React from 'react';
import SEO from '@/containers/SEO';
function App() {
  return (
    <div>
      <SEO></SEO>
    </div>
  );
}

export default App;


// src/components/SEO/index.tsx
import React from 'react';
import Helmet from 'react-helmet';
function index() {
  return <Helmet title="준찌에디터"></Helmet>;
}

export default index;
タイトルは次のように変更されました.

ルート


ルータは、その名の通り、ネットワークとネットワークとの間のルーティングを設定し、トラフィックを最も速い速度で導くネットワークデバイス、中継局である.
Reactでは、Routerはクライアントレンダリングをサポートする中継です.MPA方式のように,サーバはルーティングページを作成してクライアントに渡すのではなく,クライアントがSPA方式でルーティングページを描画する.
ページを再ロードしない場合は、React Routerを使用して各ルーティングに基づいてUIを描画できます.
CSRの使用
React Routerのリンク要素を利用すればよい.
aラベルで記入した後、htmlをサーバに要求して再ロードします.つまり、MPA方式のようにhtmlリソースを再ロードするため、フリッカが発生します.
import EditorPage from '@/containers/EditorPage';
import { routes } from '@/routes';
import React from 'react';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';

function Router() {
  return (
    <BrowserRouter>
      {/* <Link to={routes.EDITOR}>hi</Link> */}
      <a href={routes.EDITOR}>hi</a>
      <Switch>
        <Route path={routes.EDITOR} exact component={EditorPage}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;
Linkタグを使用して作成すると、クライアントレンダリングが適用され、htmlの再要求ではなくjsファイルが表示され、ルーティングに適したUIが描画されます.(構成部品)
import EditorPage from '@/containers/EditorPage';
import { routes } from '@/routes';
import React from 'react';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';

function Router() {
  return (
    <BrowserRouter>
      <Link to={routes.EDITOR}>hi</Link>
      <Switch>
        <Route path={routes.EDITOR} exact component={EditorPage}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;

react-router-dom vs react-router


応答ルータは、クライアントがアドレス値の変化に応じてページまたはコンポーネントの変化を提供するライブラリです.
リアクションルータは、メインブランチ(コア付き)にあるライブラリです.->コアモジュール
リアクションルータドームは、ドームで認識できる要素を除くライブラリです.リンク→aラベルとしてレンダリングされます.
カーネルが不要な場合はreact router domを使用することをお勧めします.

HashRouter vs BrowserRouter


エクスプローラ
A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.
  • HTML 5のHistory APIを使用してUIを更新します.
  • ダイナミックページに適しています.サーバ上のデータをスクリプトに加工して渡すページ→サーバデータを用いて作成するページ
  • をリフレッシュすると、パスが見つからずエラーが発生します.->reactアプリケーションにはパスがありますが、サーバにない場合は
    • です.
    ハッシュルータ
    Hash history does not support location.key or location.state.
  • アドレスにハッシュを追加します.example.com/#/messages/messages
  • 検索エンジンが読めません.
  • の静的ページに適しています.
  • HashRouterはサーバからURLハッシュを読み取ることができないため、設定をサーバ側Renderingにバックアップできません.これからの住所が分からない.

    • React-Routerのキー構成部品

  • コア構成部品
  • Route→最も重要な低レベルコンポーネント.このパスが現在のパスと一致すると、UIがレンダリングされます.
  • ブラウザ→History APIを注入することにより、History APIを用いてルーティングを行うことができる.
  • リンク→ページを変換し、aラベルにコンパイルします.(Client Side Render)
  • スイッチ→複数の経路が存在する場合、経路に一致する経路のみが表示されます.複数のルーティングを合成するために使用します.

    • Quick Start

    import EditorPage from '@/containers/EditorPage';
import { routes } from '@/routes';
import React from 'react';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';

function Router() {
  return (
    <BrowserRouter>
      <Link to={routes.EDITOR}>hi</Link>
      <Switch>
        <Route path={routes.EDITOR} exact component={EditorPage}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;

    export


    ->ファイル名とディレクトリ名はエクスポートの基準ではありません.
    ->エクスポートされた名前に基づいてimportに使用します.自動完了

    size exceeds the recommended limit


    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: app.bundle.js (964 KiB)
    上記のエラーは、構築および導入環境で実行される場合に発生します.
    次のように変更できます.
      
   performance: {
    hints: false,
  // 엔트리 포인트 사이즈를 정해둔다.
  maxEntrypointSize: 512000,
  // maxAssetSize도 추가한다.
    maxAssetSize: 512000
}

    Ref

  • [react-helmet]
  • [webpackサイズエラー]
  • [react router]
  • [react router blog (level up)]
    • TIL-wecode 5日目javascript
    はしごを登る(DFS)