useNavigate

처음으로 아예 처음부터 만드는 project 중 생긴 issue.

만약 클릭 시 정보를 가지고 페이지를 전화하려면 예전에는 useHistory를 썻으나, 이제는 navigate로 전환이 되었다.

// function
   const handleDbClickRow = (el) => {
        console.log(el);
        navigate(`/viewer/${el.attributes.uuid}`);
    };

// paths
    viewer: '/viewer/:id',

// route
    <Route path={paths.viewer} element={<Viewer />} />

Props

첫 번째 인자로 내가 이동할 주소를 받고 두 번째 인자로 {replace, state}인수를 사용한다.
replace (true or false)
-true를 쓰면 이동할 주소로 이동한후 뒤로가기가 안된다. 뒤로가기를 누르면 메인페이지("/")로 돌아가게된다.

false를 누르면 뒤로가기가 가능한데 이게 기본값이기 때문에 굳이 미리 넣을 필요는 없음.

state 넘겨주는 방법

navigate(`/examination/${diagnosis.id}`, {
                            state: {
                              filterOption: {
                                selectedDoctor,
                                selectedPatient,
                                typedPatient,
                                dateFilter,
                                startDateTime: startDateTime
                                  ?.toDate()
                                  .getTime(),
                                endDateTime: endDateTime?.toDate().getTime(),
                              },
                            },
                          });
                          

state를 받을 때는 useLocation() 훅을 이용해 취득할 수 있다.

const { state } = useLocation();