[React] Navigation

Navigation

---

경로이동

1. useNavigate

---

이벤트 핸들러(버튼 클릭 등)나 특정 조건에 따라 프로그래밍적으로 경로 이동을 할 때 사용하는 훅(함수)

const navigate = useNavigate();
navigate("경로");

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

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

  const loginHeandle = () =>{
    //로그인 성공 후 이동
    navigate("/mypage")
  }

  return <button onClick={loginHeandle}>Login</button>
}

navigate( -1 )	뒤로 가기
navigate( 1 )	앞으로 가기
navigate( '/path', { replace: true } )	히스토리 스택 덮어씌어 새로운페이지 이동 -> 뒤로 가기시 이전 페이지로 돌아가지x
navigate('/path', { state: { key: 'value' } })	두 번째 인자로 상태 전달가능.(꼭 키밸류아니여도됨) 목적지 컴포넌트에서 useLocation 훅을 사용하여 접근가능

 

2. Navigate

---

특정 조건에 따라 자동으로 페이지를 리디렉션할 수 있는 컴포넌트

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

function MyComponent({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <Navigate to="/login" replace={true} />;
  }

  return <h1>Welcome!</h1>;
}

function Example() {
  return (
    <Navigate
      to="/new-path"
      state={{ key: "value" }} // 상태 데이터 전달
    />
  );
}

function NewPage() {
  const location = useLocation();
  console.log(location.state); // useLocation통해 { key: "value" }접근가능
  return <h1>New Page</h1>;
}

 

3. Link

---

사용자 클릭을 통해 다른 페이지로 이동할 수 있는 컴포넌트

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

function MyComponent() {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

 

+) Link 컴포넌트의 state 속성으로 전달된 값 location.state로 접근가능

<Link to={'/coin-detail'} state= { coin } > Go </Link>
---
const location = useLocation();
const coin = location.state?.coin;
<h1>{coin?.name}</h1>

4. NavLink

---

Link와 비슷하지만 현재 활성화된 경로에 대해 스타일을 추가할 수 있는 컴포넌트

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

function MyComponent() {
  return (
    <nav>
      <NavLink to="/home" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </nav>
  );
}

 

 

 

상태공유

1. useLocation

---

현재 URL 위치와 관련된 정보를 가져오는 훅

네비게이션 상태에 따라 어떤 작업을 수행할 때 유용

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

function MyComponent() {
  const location = useLocation();
  console.log(location.pathname); // 현재 경로를 출력

  return <div>Current Path: {location.pathname}</div>;
}

 

2. useParams

---

URL 파라미터를 가져오는 훅

동적 경로에서 파라미터를 읽어야 할 때 유용

function MyComponent() {
  const { id } = useParams();
  return <div>Item ID: {id}</div>;
}

//App.js
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/movie/:id" element={<Detail />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

3. useMatch

---

현재 경로와 특정 경로가 매치되는지 확인하는 데 사용

경로 정보를 확인하거나 파라미터를 추출할 때 유용

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

function Example() {
  const match = useMatch("/example/:id");
  
  if (match) {
    console.log(match.params.id); // ":id"의 값 출력
  }

  return <div>{match ? `Matched ID: ${match.params.id}` : "No Match"}</div>;
}

 

특정 경로와 현재 URL이 매치되는 경우 매칭된 정보(params, pathname, pattern 등)를 반환