한입크기 감정일기장 - 페이지 라이팅2 - React Router 응용

Parth Variable

<Route path="/diary/:id" element={<Diary/>}></Route>

이렇게 쓸 경우 ex)diary/123213 페이지로 넘어가지만,
기존에 diary페이지는 제대로 나오지않는다. (무조건 id를 받는것으로 되어있음으로)

<Route path="/diary/:id" element={<Diary/>}></Route>
<Route path="/diary" element={<Diary/>}></Route>

id를 받지않는 경우도 써주면된다.

useParams()

리액트가 제공하는 리액트 훅은 아니지만, 별도의 라이브러리가 자신의 라이브러리의 기능을 편하게 이용할 수 있게만들어준 사용자정의 훅들을 커스텀 훅스라고 부른다.

전달한 id값을 받기

Diary.js

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

const Diary = () => {
  const {id} = useParams();
  console.log(id);
  return(
    <div>Diary</div>
  )
}

export default Diary;

useSearchParams

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

(네임+벨류를 엮어서 전달)

http://localhost:3000/edit?id=10&mode=dark
url를 넣어 입력해도, 오류가 나지않는다. ? 물음표뒤에 들어간 경우엔 별도의 처리가없어도 맵핑이된다.

값을 꺼내오기.

Edit.js

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

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

  const id = searchParams.get('id');
  const mode = searchParams.get('mode');
  console.log('id:',id,'mode:', mode);

  return(
    <div>Edit</div>
  )
}

export default Edit;

경로바꿔주기

const Edit = () => {
  return(
    <>
      <div>Edit</div>
      <button onClick={()=>setSearchParams({who:'winterlooad'})}>QS바꾸기</button>
    </>
  )
}

pageMoving(useNavigate)

경로이동. 링크태그를 클릭안했을때도, 의도적으로 페이지를 바꿔버릴 수 있다.

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

const Edit = () => {
  const navigate = useNavigate();
  return(
    <>
      <button onClick={()=>navigate('/home')}>Home으로 가기</button>
    </>
  )
}

뒤로가기는 -1를 넣어주면된다.

 <button onClick={()=>navigate(-1)}>뒤로가기</button>