[React] React Router Hooks

react router Hooks
React Routerは、ルータのステータスにアクセスし、コンポーネント内でナビゲーションを実行するHooksを提供します.
withRouter HOCを使用すると、既存のマッチング、ロケーション、履歴オブジェクトのアクセス方法を置き換えることができます.
useHistory
useHistory Hookでは、ナビゲーションに使用できるhistoryオブジェクトにユーザーがアクセスできます.

import React from 'react';
import { withRouter } from 'react-router-dom'; 

const Home = ({ history }) => {
  return (
    <div onClick={() => history.push('/auth')}>Hello!</div>
  );
};

export default withRouter(Home);

BrowserRouter、スイッチはホーム構成部品のDefaultPropsに履歴オブジェクトを入れます

ヒストリオブジェクトを使用するには、

が正常に動作するように、withRouter hocを使用して構成部品をカプセル化する必要があります.

履歴オブジェクトを使用して応答アプリケーション内で

をルーティングする.

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home"); //해당 페이지로 이동시킨다.
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

useLocation
useLocation hookは、現在のURLを表すlocationオブジェクトを返します.
現在滞在しているページに関する情報をユーザーに伝えます.
URLが変更されるたびに新しい場所に戻るusStateと見なすことができます.

import { useLocation } from "react-router";

const Home=(props)=>{
  const location=useLocation();
  console.log(location.pathname); //출력 예: /topics/switch
  
  return (
    ...
  );
}
export default Home;

pathname:urlがhttp://localhost:3000/home?id=1/homeの場合

search:クエリーリストを解析する必要がある場合に役立ち、pathname出力の部分のほかにクエリーリストを出力しますか?id=1の

useParams
useparams hookは、URLによって渡されたパラメータkey/value対のオブジェクトを返す.

は、match propsを用いてmatchを行う既存のものである.params.id形式でアクセスする必要があるが、useParamsを使用すると

により簡単にアクセスできる.

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from 'components/Home';

const App = (): JSX.Element => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/home/:id' component={Home} />
        {/* id라는 동적 라우팅값을 걸어주었다. */}
      </Switch>
    </BrowserRouter>
  );
};

export default App;

import React from 'react';
import { useParams } from 'react-router-dom';

const Home = () => {
  const { id } = useParams();
  // 동적 라우팅 값으로 걸어둔 이름으로 객체를 가져올 수 있다.
  
  // 현재 주소의 값이 http://localhost:3000/home/3 일때
  console.log(id); // "3"이 출력된다.
  
  return (
    <></>
  );
};

export default Home;

useRouteMatch
userRooteMatch hookは、matchオブジェクトの値にアクセスできるhookです.

Routeエレメントを持つProperty(path,strict,sensitive,excel)のオブジェクトをパラメータとして受信することで、path Propertyが現在のページURLに一致する場合、そのpathのmatchオブジェクトが返され、一致しない場合nullが返されます.

パラメータを渡さずにhookを呼び出すと、withRouterHocを使用してmatchオブジェクトにアクセスするように、親ルーティング要素に最も近いmatch値が返されます.

import { Route } from "react-router-dom";

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />
  );
}

上のコードの代わりに.

import { useRouteMatch } from "react-router-dom";

function BlogPost() {
  let match = useRouteMatch("/blog/:slug");

  // Do whatever you want with the match...
  return <div />;
}

代わりに使えます.