5. Router(useNavigate, useParms, useSearchParms)

박선규

Jul 15, 2025

5. Router(useNavigate, useParms, useSearchParms)

Contents

react-router-dom 설치 Link useNavigate useParams 이용해 동적 매개변수 가져오기 useSearchParams 이용해 쿼리스트링 가져오기

react-router-dom 설치

📌

react-router-dom은 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 대표적인 라이브러리다.

이를 사용하면 브라우저의 주소(URL)를 기반으로 다른 컴포넌트나 페이지로 이동 할 수 있으며, 여전히 전체 페이지를 새로고침하지 않는 SPA(Single Page Application) 방식으로 동작합니다.

npmnpm: react-router-dom

npm: react-router-dom

Declarative routing for React web applications. Latest version: 7.6.3, last published: 14 days ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 22624 other projects in the npm registry using react-router-dom.

Link

App.js


import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import './App.css';
import Home from './Home';
import About from './About';



function App() {
  return (
    <BrowserRouter>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
      <Routes>
        <Route path="/" element={<Home/>}></Route>
        <Route path="/about" element={<About/>}></Route>
      </Routes>
    </BrowserRouter>
    )
}

export default App;

📌

Link 컴포넌트는 사용자가 클릭할 수 있는 내비게이션 링크를 생성 하며, Routes와Route를 사용해 해당 링크의 주소(path)에 맞는 컴포넌트를 렌더링 한다.

useNavigate

Home.js


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

function Home(props) {
  const navigate = useNavigate();

  function moveAbout() {
    navigate("/about");
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={moveAbout}>소개페이지이동</button>
    </div>
  );
}

export default Home;

📌

useNavigate는 React Router v6 이상에서 제공하는 훅(Hook) 이다.

컴포넌트 내부에서 프로그래밍 방식으로 페이지 이동(navigation) 을 할 수 있도록 도와준다.

Link 컴포넌트처럼 클릭이 아닌, 함수 호출로 이동할 때 사용한다.

useParams 이용해 동적 매개변수 가져오기

components/Nav.js


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

function Nav(props) {
    return (
        <div>
         <Link to="/">홈</Link>
         <Link to="/about">소개</Link>
        </div>
    );
}

export default Nav;

page/Info.js


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

function Info(props) {
    const {id} = useParams();

    return (
        <div>
            <h1>Info 번호 : {id}</h1>
        </div>
    );
}

export default Info;

📌

useParams은 현재 URL 경로에서 동적 파라미터(매개변수) 값을 추출할 때 사용한다.

page/About.js


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

function About(props) {
    const navigate = useNavigate();

    function moveUserInfo (){
        navigate("/info/1")
    }

    return (
        
        <div>
            <h1>About</h1>
            <button onClick={moveUserInfo}>유저정보 페이지로 이동</button>
        </div>
    );
} 
export default About;

📌

About.js 페이지에서 페이지 이동 설정을(navigate) 한다. navigate("/info/1"); 여기서 id 값 1을 넘긴다.

App.js


import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";
import Nav from "./components/Nav";
import Info from "./page/Info";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/info/:id" element={<Info />} />

      </Routes>
    </BrowserRouter>
  );
}

export default App;

📌

App.js 에서 /info/:id 경로를 연결한다. :id 를 통해 매개변수를 전달한다.

useSearchParams 이용해 쿼리스트링 가져오기

page/Info.js


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

function Info(props) {
    const {id} = useParams();

    const navigate = useNavigate();

    function moveList(){
        navigate(`/list?page=0`)
    }

    return (
        <div>
            <h1>Info 번호 : {id}</h1>
            <button onClick={moveList}>리스트페이지이동</button>
        </div>
    );
}

export default Info;

page/List.js


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

function List(props) {
    const [searchParams,setSearchParams] = useSearchParams();
    let page = searchParams.get("page");  // 쿼리스트링 객체 가져옴

    function next(){
        setSearchParams({page:Number(page)+1}); // setSearchParams 를 사용해 업데이
    }

    return (
        <div>
            <h1>List page :{page}</h1>
            <button onClick={next}>다음페이지</button>
        </div>
    );
}

export default List;

📌

useSearchParams는 react-router-dom 라이브러리에서 제공하는 훅(Hook)으로, URL의 쿼리 문자열을 읽고 업데이트하는 데 사용된다.

searchParams : URL의 쿼리 문자열을 나타내는 객체이다. 이 객체를 사용하여 특정 쿼리 매개변수의 값을 가져올 수 있다.

setSearchParams : 쿼리 문자열을 업데이트하는 함수. 이를 통해 쿼리 매개변수를 변경할 수 있다.

App.js


import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";
import Nav from "./components/Nav";
import Info from "./page/Info";
import List from "./page/List";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/info/:id" element={<Info />} />
        <Route path="/list" element={<List />}/>

      </Routes>
    </BrowserRouter>
  );
}

export default App;