기존에는 App.js에 해당 라우터와 하위 라우터를 같이 쓰는 방식이다. 대신 element의 값은 달라야 한다.
상위 컴포넌트의 경우에는 배열이나 객체를 써서 map으로 Link함수를 반복해서 내보낸다. 그리고 App.js에 추가를 해본다. 상위 Link 함수로 만든 링크들이 정상적으로 작동 하였다면 하위 컴포넌트에 들어갈 값을 작성한다. 하위도 작성을 했다면 역시 App.js에 추가를 하고 동작을 해본다.
<Route path='주소' element={<컴포넌트이름/>}/>
<Route path='위의 주소의 하위' element={<다른컴포넌트이름/>}/>
만약 주소가 /story라고 했다면 하위의 경우 /story/:number 같이 지으면 된다.
상위 주소에서 map을 할 때 매개변수이름이 : 다음에 들어간다.
하위에서도 해당 매개변수이름을 이용해서 쓰고 싶다면 useParams()함수를 쓰면 된다.
중첩은 <Route></Route>안에 쓰는 방식이다. 대신 중첩을 감싸는 컴포너트를 조금 수정을 해야 한다.
반복되는 부분 위에 <Outlet/>을 추가한다. 추가하면서 import에도 추가해야 사용이 가능하다.
Routes안에 들어가지 않는 컴포넌트를 사용하면 화면에 계속 띄워 둘 수 있다. Routes에 썼던 내용 중 계속해서 띄우고 싶은 것들만 복사해서 새로운 컴포넌트를 만들어서 div 안에 붙여 넣으면 된다. 이 때 Routes에서 썼던 변수,배열,객체 값도 들고와야 한다.
API-Navigate관련
navigate를 이용한 값 전달
navigate(“주소”, {state:값}) 형태이다. 값이 많다면 객체형태를 쓴다.
navigate를 쓰기 위해서는 useNavigate();를 받아와야 하고 useNavigate를 쓰기 위해서는 import로 받아와야 한다.
받아온 값을 찾기 위해서는 useLocation으로 찾아온다.
NavLink : 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트
예
<NavLink className={({isActive})=>(isActive?"link-style":undefined)} to={/navigate} end></NavLink>
end가 붙은 경우 주소가 완전히 일치 할 때만 class이름이 붙는다.