反応ルータフックは、あなたの成分クリーナーになります

執筆Nathan Sebhastian ✏️
Router Routerは、あなたがあなたの反応するアプリケーションのためにルーティングを管理して、扱うことができる軽量ライブラリです.
反応ルータの最も顕著な特徴の中にroute render methods , コンポーネントを有効にするmatch , location , and history 小道具一緒に、これらの小道具は、URLからコンポーネントへのデータを渡すために使用され、プログラミング的にあなたの反応アプリケーションをナビゲートします.
たとえば、戻るボタンを作成したい場合は、goBack() 機能からhistory 小道具あなたが単純な機能で前のウェブページに戻ることができるように、これはいろいろな環境またはウェブブラウザの違いを要約します.

// a Route with component props
<Route path="/post/:number" component={Post} />

// The component itself
function Post(props) {
  return (
    <div>
      In React Router v4, you get the history object from props. <br />
      <button type="button" onClick={() => props.history.goBack()}>
        Go back
      </button>
    </div>
  );
}

これはうまく動作しますが、ルートのレンダリング方法は広く読みにくく、単なる奇妙な考えられている.そういうわけでversion 5.1 , あなたが目を喜ばせるきれいな、きちんと積み重ねられたナビゲーション・コンポーネントを書くために使うことができる4つの役に立つフックを、反応ルータは含みます.これらの新しいフックがバージョン4で古いパターンと比較することによってどのように働くかをあなたに示します.
私たちはuseParams フック.

UseParamsThe useParams フックは、動的に設定されたアプリケーションURLからキー/値ペアのオブジェクトを返します.複雑なアプリケーションでは、動的である多くのナビゲーションリンクを持つことは一般的です.
例えば、あなたは/post/:id また、アプリケーションのバックエンドへのフェッチプロセスを開始するURL.この場合、最も一般の反応ルータパターンは、コンポーネント柱を使用することになっています.

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/post/hello-world">First Post</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/post/:slug" component={Post} />
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

通り過ぎることでPost コンポーネント/post/:number Route コンポーネントは、params からのオブジェクトmatch 反応ルータによって渡されるpropPost コンポーネント.

// Old way to fetch parameters
function Post({ match }) {
  let params = match.params;
  return (
    <div>
      In React Router v4, you get parameters from the props. Current parameter
      is <strong>{params.slug}</strong>
    </div>
  );
}

このメソッドは、うまくいくが、動的なルートの多くの大きなアプリケーションがある場合は非常に面倒です.あなたは何を追跡する必要がありますRoute コンポーネントはコンポーネントの小道具を必要とします.また、以降match オブジェクトがRoute レンダリングされたコンポーネントに、DOMツリーをさらに下のコンポーネントに渡す必要があります.
ここがどこですuseParams フックは本当に光る.それはあなたのコンポーネントの小道具のパターンを使用する必要はありませんので、現在のルートのパラメータを与えるきちんとしたヘルパー機能です.

<Switch>
  <Route path="/post/:slug" component={Post} />
  <Route path="/users/:id/:hash">
    <Users />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Switch>

function Users() {
  let params = useParams();
  return (
    <div>
      In React Router v5, You can use hooks to get parameters.
      <br />
      Current id parameter is <strong>{params.id}</strong>
      <br />
      Current hash parameter is <strong>{params.hash}</strong>
    </div>
  );
}

If a child component of Users パラメータへのアクセスが必要な場合は、単に呼び出すことができますuseParams() そこにも.
ここにあるexample あなたが行動でそれを見たいならば.
UseLocationResponse Router Version 4では、パラメータを取得するように、コンポーネントのプロップパターンを使用してlocation オブジェクト.

<Route path="/post/:number" component={Post} />

function Post(props) {
  return (
    <div>
      In React Router v4, you get the location object from props. <br />
      Current pathname: <strong>{props.location.pathname}</strong>
    </div>
  );
}

バージョン5.1では、useLocation フックを得るlocation 反応ルータからのオブジェクト

<Route path="/users/:id/:password">
  <Users />
</Route>

// new way to fetch location with hooks
function Users() {
  let location = useLocation();
  return (
    <div>
      In React Router v5, You can use hooks to get location object.
      <br />
      Current pathname: <strong>{location.pathname}</strong>
    </div>
  );
}

再度、サンプルコードを見ることができますCodeSandbox .
UseHistoryそれはコンポーネントの小道具を使用する1つ以下の理由を与えます.しかし、まだコンポーネントを使用するか、パターンをレンダリングする必要はありませんhistory オブジェクト?
The history オブジェクトは、コンポーネントを使用するか、またはプロップパターンをレンダリングする必要がある最後の理由です.

<Route path="/post/:slug" component={Post} />

// Old way to fetch history
function Post(props) {
  return (
    <div>
      In React Router v4, you get the history object from props. <br />
      <button type="button" onClick={() => props.history.goBack()}>
        Go back
      </button>
    </div>
  );
}

を使用してuseHistory フックは、同じ歴史オブジェクトを必要とせずに得ることができますRoute コンポーネントを渡す.

<Route path="/users/:id/:hash">
  <Users />
</Route>

// new way to fetch history with hooks
function Users() {
  let history = useHistory();
  return (
    <div>
      In React Router v5, You can use hooks to get history object.
      <br />
      <button type="button" onClick={() => history.goBack()}>
        Go back
      </button>
    </div>
  );
}

参照sample code 比較のためにuseHistory レギュラーhistory 小道具
今、あなたは使用するどんな奇妙なコンポーネント合成もなしできれいなルーティング・コンポーネントを持つことができますcomponent or render 小道具あなたは、単に置くことができます<Route> コンポーネントpath 小道具とレンダリングの場所children 内部コンポーネント.
useRouteMatch時々、あなたは<Route> コンポーネントにアクセスできるコンポーネントmatch オブジェクト.

<Route path="/post">
  <Post />
</Route>

function Post() {
  return (
    <Route
      path="/post/:slug"
      render={({ match }) => {
        return (
          <div>
            Your current path: <strong>{match.path}</strong>
          </div>
        );
      }}
    />
  );
}

上の例ではmatch を使用しないオブジェクトcomponent or render 小道具反応ルータの最新バージョンでは、また、使用することができますuseRouteMatch フックをつかむことができますmatch オブジェクトを使用せずにコンポーネント内で使用する<Route> .

<Route path="/users">
  <Users />
</Route>

// useRouteMatch to make your route above cleaner
function Users() {
  let match = useRouteMatch("/users/:id/:hash");
  return (
    <div>
      In React Router v5, You can use useRouteMatch to get match object. <br /> Current match path: <strong>{match.path}</strong> </div> ); }

今、あなたはAを作成する必要はありません<Route> コンポーネントをつかむmatch オブジェクト.もう一つexample あなたのために散らかってください.

結論
反応ルータチームはフックの力を利用して、それを木の上からそれを通過する必要なしで構成要素全体の論理を共有するように実装しました.
これらの新しいフックを使用してコンポーネントをリファクタリングしたい場合は、match , location , or history オブジェクト.

// before
function userComponent({ match, location, history }) {
  let { slug } = match.params
  // ...
}

// after
function userComponent() {
  let { slug } = useParams()
  let location = useLocation()
  let history = useHistory()
  // ...
}

その後、あなたは奇妙な外観を更新することができます<Route> ナビゲーションコンポーネントにあるコンポーネント.

// before
<Switch>
  <Route path="/user/:id" component={userComponent} />
</Switch>

// after
<Switch>
  <Route path="/user/:id">
    <userComponent />
  </Route>
</Switch>

あなたが反応ルーターフックについてどう思いますか?以下のコメントを共有します.

フル可視性の生産反応アプリ
ユーザーが再生するのが難しい問題を経験するとき、特に反応する反応アプリケーションは難しくありえます.あなたがRedux状態をモニターして、追跡することに興味があるならば、自動的にJavaScript誤りを浮上させて、遅いネットワーク要求と成分負荷時間を追跡してください.try LogRocket.

LogRocket ウェブアプリのDVRのような、文字通りあなたの反応アプリで起こるすべてを記録します.問題が発生した理由を推測する代わりに、問題が発生したときにアプリケーションがどのような状態になったかを集計およびレポートできます.また、クライアントのCPU負荷、クライアントのメモリ使用量などのメトリクスを報告し、あなたのアプリケーションのパフォーマンスを監視します.
LogRoot Reduxのミドルウェアのパッケージは、ユーザーセッションに可視性の余分な層を追加します.LogLogelはあなたのredux店からすべてのアクションと状態を記録します.
近代化する方法あなたの反応アプリをデバッグするstart monitoring for free.
郵便React Router hooks will make your component cleaner 最初に現れたLogRocket Blog .