ルーティング

私は、コーディングブートキャンプに約12週間であり、我々はちょうど良いol ';反応について学習を開始しました.反応の中に包含されているとてもクールなものがありますが、私はそれが私のお気に入りの側面の1つについてあなたにすべてのことを言っているいくつかの時間を費やすつもりです.Router Routerは、開発者が彼らの反応アプリの中で特定のコンポーネントに結び付けられる特定のURLのものを提供することができる驚くべきツールです.私はあなたがアプリケーション内で戻るボタンやリンクを使用できるようになっているだけに比べて、これがはるかにフレンドリーなユーザーエクスペリエンスのためにどのように作るか確認することができます.反応ルータを開始する非常に簡単です.あなたがしなければならないすべてはあなたの端末からNPMのインストール反応ルータDOMです、そして、あなたはその驚異のすべてにアクセスするでしょう.

コンポーネント

ルーター

ルートマチャーズ

ナビゲーションコンポーネント

最初に、我々はBrowserRouterとHashRouterであるルータを持っています.
私はほとんどHashRouterと多くの時間を費やしていないので、私はほとんどBrowserRouterを議論するでしょう.私は、彼らの間の主な違いがURLを格納して、あなたのウェブサーバと通信する方法であるということを知っています.
すべての反応ルータアプリケーションのコアはルータコンポーネントであるべきです.あなたのルータのコンポーネントを使用していることを確認するには、ちょうどあなたのプロジェクトのトップレベル(最も通常のアプリ)コンポーネントの反応ルータDOMからBrowserRouterをインポートします.
注意:ブラウザールータの名前を変更することで、コードを簡単に書くことができます.ほとんどの場合、以下に示すルータとしてブラウザールータを改名します.

npm install react-router-dom
// In your terminal



import { BrowserRouter as Router } from 'react-router-dom';
// At the top level of your project

次にルートとスイッチのようなルートマッチャーコンポーネントを持っています.最初にスイッチルートマッチャーコンポーネントについて話をするつもりです.スイッチが描画されると、子プロセスのルート要素を検索し、パスが現在のURLに一致するものを探します.それが1つを見つけるとき、それはそのルートをレンダリングして、他のすべてを無視します.これは、あなたがスイッチを使用しているならば、あなたはルートのものをより特定の経路の前により特定の経路で置かなければならないことを意味します.これは、スイッチが1つの入力に一致する最初のルートをレンダリングするためです.ルートが一致しない場合、スイッチは何も表示しない.

<Switch>
  <Route exact path="/animals" component={Animals} />
  <Route path="/animals/fish" component={Fish} />
  <Route component={Missing} />
</Switch>

上記のコードでは、誰かが“/動物/魚”を訪問するとき、スイッチが「/動物」を貸すように、正確な経路属性は使用されています.正確なパス属性がなければ、あなたのスイッチの最後のルートとして“/動物”を置く必要があります.
注意すべき1つの重要な点は、ルートパスがURLの先頭と一致していることです.これは“/”のルートパスがすべてのURLが“/”で始まるという事実のために常にどんなURLにでも一致することを意味します.このため、ルートルートを最後のスイッチとします.また、スイッチを使用せずにルートコンポーネントを使用することもできますが、ルートの正確なパス属性を使用したい場合は、URLが入力された場合、あなたが提供した正確なルートURLではない場合は何も発生しません.
最後に、少なくともナビゲーションコンポーネントがあります.

関連

のNavlink

のNavbar

リンクコンポーネントは直感的に、どこであなたの反応のアプリケーションでリンクコンポーネントを置くあなたのHTML上のリンクを(タグ)を生成する作業.あなたがナビゲーションの目的のためにあなたのアプリケーションの上部に残っている任意のリンクをご希望の場合は、単純なNavbarのコンポーネントを使用することができます.Navbarコンポーネントを使用すると、スパの上部にしたい任意のリンクを追加することができます.次のようにNavbarコンポーネントをレンダリングできます.

// App.js

import NavBar from '../components/NavBar';

const App = (props) => {
  return (
    <Router>
      <div>
        <NavBar />
          <Route exact path="/" component={Home}/>
          <Route exact path="/movies" component={Movies}/>
          <Route exact path="/directors" component={Directors}/>
          <Route exact path="/actors" component={Actors}/>
      </div>
    </Router>
  );
};

// NavBar.js

import { NavLink } from 'react-router-dom';

const NavBar = () => {
  return (
    <div className="navbar">
      <ul>
        <li><NavLink exact to="/">Home</NavLink></li>
        <li><NavLink exact to="/movies">Movies</NavLink></li>
        <li><NavLink exact to="/directors">Directors</NavLink></li>
        <li><NavLink exact to="/actors">Actors</NavLink></li>
      </ul>
    </div>
  );
};

ルーティングに反応するために、より多くのものがあります、しかし、私がちょうどこの素晴らしいテクノロジーで私の旅行を始めたので、これは私が現在あなたのために持っているすべてです.詳細については、React docs(彼らは本当に良いドキュメントを持っている)をチェックアウトしてください、また、反応ルータのチュートリアルは、私は非常にルーティングがどのように動作するかのアイデアを得ることに非常に役立つことを発見した.