22.10.24 React 4일차 / bootstarp, routes, useNavigate, Outlet

// useNavigate

  let navigate = useNavigate();

페이지 이동 도와주는 navigate. ( 유용한 문법들을 사용할 수 있게 도와줌 )

 

              <NavDropdown.Item onClick={()=>{ navigate('/detail') }}>
                메뉴 1
              </NavDropdown.Item>
              
              navigate(1)
              navigate(-1)
              
              // 웹사이트의 앞으로가기 뒤로가기의 역할과 같음

navigate('/경로') 로 이동시켜줌

navigate(1) / navigate(-1) 의 경우, 앞으로가기 뒤로가기의 기능과 똑같다.

 

// Outlet

Route의 경로를 정리해주는 nested의 경우 엘리멘츠를 두개 표현 할 수 있는데,

이때 <outlet>을 설정해주어야 그 나타나는 장소를 설정할 수 있음

 

기존 about 경로에 위치하는 내용과 함께 <Outle> 위치에 작성됨.

<Outlet> 지정하지 않으면 출력되지않음