リアクションルータ

異なるアドレスに異なる画面を表示することをルーティングと呼ぶ.この機能は、ライブラリ自体に組み込まれていません.逆に、ブラウザのAPIを直接使用して管理したり、ライブラリを使用して簡単に実行したりすることができます.
ここで、反応ルータは、反応ルーティングライブラリの中で最も履歴が長く、使用頻度が最も高い.応答型ルータは、クライアントが実現するルーティングを非常に簡単にすることができる.さらに、後でサーバ側レンダリングを行う場合、ルーティングを支援するコンポーネントも提供されます.

プロジェクトの準備

ライブラリのインストール

yarn add react-router-dom 혹은 npm install react-router-domでreact-router-domというライブラリをインストールします.

アプリケーションルータ

応答ルータをプロジェクトに適用する場合、react-router-domに組み込まれたBrowserRouterというコンポーネントを使用して保護されます.このコンポーネントを使用すると、WebアプリケーションがHTML 5のHistory APIを使用してページをリフレッシュすることなくアドレスを変更し、propsを使用して現在のアドレスに関する情報を簡単に表示または使用できます.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Route構成部品を使用して構成部品を特定のアドレスに接続

Routeという名前の構成部品を使用して、ユーザーの現在のパスに応じて異なる構成部品を表示します.「Route」構成部品を使用して、ルールのあるパスに表示する構成部品を定義します.使用方法は次のとおりです.

<Route path="주소규칙" component={보여줄 컴포넌트} />

リンク構成部品を使用して別のアドレスに移動

リンクコンポーネントは、クリックして別のアドレスに移動するコンポーネントです.一般的なWebアプリケーションでは、aタグを使用してページを切り替えますが、反応ルータを使用する場合は、このタグを直接使用する必要はありません.このラベルは、ページ切り替え中にページを再ロードし、アプリケーションのすべてのステータスを消去します.つまり、レンダリングされたすべてのコンポーネントが消え、最初からレンダリングが再開されます.
リンクコンポーネントを使用してページを切り替えると、アプリケーションはページの新しいロード状態を維持し、HTML 5 History APIのみを使用してページのアドレスを変更します.リンクコンポーネント自体はaラベルで構成されていますが、ページの切り替えを防ぐ機能が内蔵されています.使用方法は次のとおりです.

<Link to="주소">내용</Link>

1つのルーティングに複数のパスを設定

例ですぐ書きます.

import React from "react";
import { Route, Link, Switch } from "react-router-dom";
import About from "./About";
import Home from "./Home";

const App = () => {
  return (
    <div>
        <Route path="/" component={Home} exact={true} />
        <Route path={['/about', '/info']} component={About} />
    </div>
  );
};

export default App;

サブルート

サブルーティングは、ルーティング内部で別のルーティングを定義することを意味する.それほど複雑ではなく,ルーティングとして用いられる素子内部でルーティング素子を再利用すればよい.

const blabla = () => {
  <div>
  	<Route ...>  
  </div>
}  

history

historyオブジェクトは、ルーティングとして使用される要素と一致し、位置とともに伝達されるpropsの1つであり、このオブジェクトが要素内で実現される方法によってルータAPIを呼び出すことができる.たとえば、ボタンをクリックしたときに後退したり、ログインして画面を切り替えたり、他のページにジャンプしたりするのを防止する必要がある場合はhistoryを使用します.

Switch

スイッチコンポーネントは、複数のルーティングを囲み、一致するルーティングの1つだけをレンダリングします.Switchを使用すると、すべてのルールと一致しない場合に表示されるNot Foundページも実現できます.

<Switch>
   <Route path="/" component={Home} exact={true} />
   <Route path={['/about', '/info']} component={About} />
   <Route path="/profiles" component={Profiles} />
   <Route path="/history" component={HistorySample} />
   <Route 
     // path를 따로 정의하지 않으면 모든 상황에 렌더링됨
      render={({ location }) => (
        <div>
          <h2>이 페이지는 존재하지 않습니다:</h2>
          <p>{location.pathname}</p>
        </div>
      )}
   />
</Switch>

NavLink

NavLinkはLinkと似ています.現在のパスがリンクで使用されているパスと一致する場合、特定のスタイルまたはCSSクラスのコンポーネントを適用できます.

import React from "react";
import { Link, NavLink, Route } from 'react-router-dom';
import Profile from "./Profile";

const Profiles = () => {
    const activeStyle = {
        background: 'black',
        color: 'white'
    };
    return (
        <div>
            <h3>사용자 목록</h3>
            <ul>
                <li>
                    <NavLink activeStyle={activeStyle} to="/profiles/velopert">velopert</NavLink>
                </li>
                <li>
                    <NavLink activeStyle={activeStyle} to="/profiles/gildong">gildong</NavLink>
                </li>
            </ul>
            
            <Route 
              path="/profiles"
              exact render={() => <div>사용자를 선택해 주세요.</div>}
            />
            <Route path="/profiles/:username" component={Profile} />
        </div>
    );
};

export default Profiles;