url 정보 가져오기

📌 useNavigate()

• Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어준다.

• useNavigate는 양식이 제출되거나 특정 event(onClick)가 발생할 때, url을 조작할 수 있는 interface를 제공한다.

import { Link, useNavigate } from "react-router-dom"

function Header() {
  const navigate = useNavigate();

  const onAboutClick = () => {
    navigate("/about");
  }

  return (
    <h1>
      <ul>
        <li>
          <Link to={""}>Home</Link>
        </li>
        <li>
          <button onClick={onAboutClick}>About</button> 
        </li>
      </ul>
    </h1>
  )
}

export default Header;

📌 useParams()

• URL에 포함되어있는 Key, Value 형식의 객체를 반환해주는 역할을 한다. Route 부분에서 Key를 지정해주고, 해당하는 Key에 적합한 Value를 넣어 URL을 변경시키면, useParams를 통해 Key, Value 객체를 반환받아 확인할 수 있다

• 파라미터가 아닌 현재 페이지의 Pathname을 가져오려면 useLocation()을 사용해야 한다.

import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  let { userId } = useParams();
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

📌 useLocation

• 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks이다.

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

const location = useLocation();

useEffect(() => {
  console.log(location);
}, [ location ])