[Node.js] React Router 지원 hooks 써보기 ( history, location )

1. useHistory / useNavigate

// ver.5

const history = useHistory();

history.push("/")

// ver.6

const navigate = useNavigate();

navigate("/")

특정 링크로 위치 이동할 수 있다.

 

2. useLocation

{
  pathname: '/auth/login', 
  search: '', hash: '', 
  state: null, 
  key: 'default'
}

현재 라우팅된 페이지에 대한 정보를 가지고 있다.

 

3. useParams

// App.js ( 라우팅을 통해 렌더링 되는 컴포넌트 )

// 모듈 불러오기
import { useParams } from "react-router"

function App(){
  // url에서 params 가져오기
  const params = useParams();
  
  // 가져온 params 콘솔창에 출력하기
  console.log(params);
  
  // 주소창에서 params 받을 주소 설정하기
  return <Routes>
    <Route path="/" element="<Home/>" />
    <Route path="/:test" element="<Home/>" />
  <Routes>
};

// localhost/thisisparams 주소 접속시 콘솔창 출력 결과

{ test: thisisparams }

주소창에 입력된 정보를 받아올 수 있다.

 

4. useRoutes

function App() {
  const element = useRoutes([
    // <Route> 태그로 감싼효과
    { path: "/", element: <Home /> },
    { path: "detail", element: <Detail /> },
    {
      path: "auth",
      element: <Auth />,
      // 중첩 라우팅 하기
      children: [
        { path: ":signup", element: <Signup /> },
        { path: "login", element: <Login /> },
      ],
    },
    // 나머지 모든 경로에 따른 컴포넌트 설정하기
    { path: "*", element: <Notfound /> },
  ]);

  // element 전체 반환하기
  return element;
}

단 하나의 모듈을 불러와 라우팅을 사용할 수 있도록 해준다.