React Router Dom의 유용한 기능

Path Variable

url에 변수를 담아서 전달하는 방법 (경로에 변수를 사용)
=> useParams 를 사용한다.

http://mydiary/diary/1
위처럼 path뒤에 :id 를 붙여서 사용한다.

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

const Diary = () => {
    const { id } = useParams();
    console.log(id); // http://mydiary/diary/1 일경우 '1'출력
    return (
        <div>
            <h1>Diary</h1>
            <p>이곳은 일기 상세 페이지입니다.</p>
        </div>
    );
};

export default Diary;

라우터 걸때는 아래와 같이 사용한다.

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import RouteTest from './components/RouteTest';

import Home from './pages/Home';
import New from './pages/New';
import Edit from './pages/Edit';
import Diary from './pages/Diary';

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <h2>App.js</h2>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/new" element={<New />} />
                    <Route path="/edit" element={<Edit />} />
                    <Route path="/diary/:id" element={<Diary />} />
                </Routes>
                <RouteTest />
            </div>
        </BrowserRouter>
    );
}

export default App;

Query String

웹페이지에 데이터를 전달하는 가장 간단한 방법

http://mydiary/edit?id=10&mode=dark
이렇게 사용하는건데 '?' 뒤로 name과 value의 쌍이 &로 연결되어 나온다.

query string은 별도의 라우팅 처리를 안해주어도 자동의 매핑이 된다.
즉, '?' 뒤의 경로들은 페이지 라우팅하는 경로에 영향을 안준다는 말이다.

꺼내어 사용할때는 searchParams을 사용한다.

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

const Edit = () => {
    const [searchParams, setSearchParams] = useSearchParams();

    const id = searchParams.get('id');
    console.log(id);
    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 일기 수정 페이지 입니다.</p>
            <button onClick={() => setSearchParams({ id: '100' })}>QS바꾸기</button>
        </div>
    );
};

export default Edit;

Page Moving

useNavigate를 사용하여 페이지를 이동한다.
v6 에서 대신 사용한다.

const navigate = useNavigate(); 
<button onClick={() => {navigate('/home')}}>
//이렇게 경로로 이동할 수 있는 navigate함수를 호출로 사용한다.

뒤로 가고 싶을때는 navigate(-1)
새로고침할때는 navigate(0) 이렇게 사용할 수도 있다.

Link와 navigate의 차이점
Link는 네비게이션을 위한 하이퍼링크를 생성하고 사용자가 클릭하거나 다른 이벤트로 인해 해당 링크를 클릭할때 url이 변경되고 주로 앱 내에서 다른 경로로 이동하고 싶을때 사용한다.
navigate는 함수를 호출하여 프로그래밍 방식으로 네비게이션을 수행할 수 있다. 주로 이전 페이지로 돌아가거나 특정 상황에서 사용자를 다른 경로로 리다이렉션 할 때 사용한다.