React 라우팅 응용

React Router에서 콜론(:)은 동적인 URL 매개변수를 나타낸다. 이를 통해 동적으로 변하는 부분을 처리 할 수 있다.

 	<Route path='/edit' element={<Edit/>}/>
	<Route path='/diary/:id' element={<Diary/>}/>

useParams를 사용한 커스텀 훅

useParams를 사용하면 동적으로 변화하는 매개변수를 불러 올 수 있다.

import { useParams } from "react-router-dom";
const Diary = ()=>{
    const {id} = useParams();// 커스텀 훅  
    console.log(id);
    return(
        <div>
            <h2>일기장</h2>
            <p>이곳은 일기장 입니다.</p>
        </div>
    );
}
export default Diary;

리액트 쿼리 매개변수 조작하기

searchParms를 통해 parms를 불러온다.
쿼리로 보내는 보내는 방법
http://localhost:3000/edit?id=10&mode=dark

Params를 수정하는 방법
setSearchParms

useNavigate()를 사용하여 페이지 이동하기

useNavigate()의 메소드를 받아서 페이지이동
뒤로가기는 -1 , string을 사용하여 경로 이동

import { useNavigate, useSearchParams } from "react-router-dom";
const Edit = ()=>{
    const navigate = useNavigate();
    const [searchParms , setSearchParms] = useSearchParams();
    const id =  searchParms.get("id");
    console.log(`id : `,id);
    const mode = searchParms.get('mode');
    console.log(`mode :`,mode);
    
    return(
        <div>
            <h2>수정</h2>
            <p>이곳은 수정하는 곳 입니다.</p>
            <button onClick={()=>{setSearchParms({who:"leedongkyu",age:'25'})}}>QS</button>
            <button onClick={()=>{navigate('/home')}}>home</button>
            <button onClick={()=>{navigate(-1)}}>뒤로가기</button>
        </div>
    );
};

export default Edit;