リアクションルータ

12039 ワード
react router dom テキストリンク

整理する


1.ルーティング


ルーティングとは、アドレスに応じて異なるページを表示することです.
反応器にはルーティング機能が内蔵されていないため、react-router-domを用いて実施されることが多い.

2. react-router-dom


2.1 <BrowserRouter>

HTML5のHistory APIを使用すると、ページをリフレッシュせずにアドレスを変更できます.

2.2 <Route>


現在のパスに基づいて表示する構成部品を指定します.<Route>と表示される要素は、history、matchおよびlocationをpropsに降格する.
  • component:ロードする構成部品を登録
  • path:登録素子のアドレスを指定
  • exact:要素が完全に一致している場合にのみレンダリング
  • history:push,replaceは他の経路
    • に移動可能
  • location:現在のパスに関する情報は、URL照会
    • を有する
  • match:一致するルーティング情報、params情報
    • を有する
    詳細については、react-devtoolsを使用して各props上のデータをレポートします.

    2.3 <Link>


    ページを切り替えるときは、<a>と同様の状態を維持します.
  • to:移動するアドレスを指定します(href)

    • 2.4 <NavLink>

    <Link>などのロールでは、パスが他のパスと一致する場合、特定のスタイルまたはクラスを適用できます.
  • to:移動するアドレスを指定します(href)
  • activeStyle:ルーティングに一致するようにスタイルを登録
  • activeClassName:ルーティングに一致するように指定するクラス
    • を登録

    2.5 <Switch>


    一致する<Route>のみが表示されます.
    また、すべての<Route>と一致しない場合は、表示する構成部品を指定できます.

    2.6 withRouter()

    <Route>history、matchおよびlocationのHOCを無効にします.

    2.7使用例


    通常は<BrowserRouter>を使用して上部を囲み、内部は<Switch>を使用して<Route>の設定を行います.
    適切な包囲順序のみが指定されている場合は、どの位置に適用しても構いません.
    // App.jsx
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { MainPage, LoginPage, RegisterPage } from 'pages';

<BrowserRouter>   
  <Switch>
    <Route exact path="/" component={MainPage} />
    <Route exact path="/login" component={LoginPage} />
    <Route exact path="/register" component={RegisterPage} />
  </Switch>
</BrowserRouter>
    // NavigationBar.jsx
import React, { useMemo } from "react";
import { NavLink, withRouter } from "react-router-dom";

const NavigationBar = ({ history }) => {
  const activeLinkStyle = useMemo(() => ({ color: "#1977f1" }), []);

  return (
    <nav>
      <li>
        <NavLink to="/" activeStyle={activeLinkStyle} exact>
          Home
        </NavLink>
      </li>
      <li>
        <NavLink to="/login" activeStyle={activeLinkStyle}>
          Login
        </NavLink>
      </li>
      <li>
        <NavLink to="/Register" activeStyle={activeLinkStyle}>
          Register
        </NavLink>
      </li>
    </nav>
  );
};

export default withRouter(NavigationBar);

    参考書

  • 反応技術(改訂版)第13章-金民俊
    • gitのダウンロードと簡単な使用
    パイソンプロジェクトを分離するためのPipenv