[TIL] react-router v6

오늘 공부한것 & 기억하고 싶은 내용

Link를 사용하려면 Link를 Router 안에 넣어야 한다.
Router 밖에서는 Link를 render 할 수 없기 때문이다.

Outlets

• react-router-dom한테 말해줘야 함
• 우리가 Root의 자식을 render하길 원한다고
• react router는 이 Outlet컴포넌트를 통해서 url을 보게
• outlet은 내가 render하고자 하는 route를 바꿔서 render하게 해줌
• 레이아웃 짤때 편함(위 아래에 header, footer 넣고 컨텐츠를 outlet이라고 생각하면 됨)
• Link to에 경로를 쓸때 앞에 /를 빼고 쓰면 현재 내가 있는 url 다음에 경로를 추가 시키는 것이다. 맨앞에 /가 붙으면 절대경로임

errorElement

• 다른 컴포넌트들을 또 다른 컴포넌트에서 발생하는 문제로부터 보호해줌
• 모든 route에 적용 가능

useNavigate

• 유저를 어딘가로 보내는 기능이 있다.( 유저를 이동시키고 위치를 바꿔줌)
• 다른 페이지로 이동시키는 방법 (Link 이용 / useNavigate)
• v5에서는 location.push ~ 을 사용함

useParams

• route path에 지정한 변수와 현재 URL에서 일치하는 값을 찾아 반환해준다.
• :userId는 동적 변수이고, useParams를 사용해서 URL에서 해당 userId 값을 가져온다.

//Router.tsx
		{
        path: "users/:userId",
        element: <User />,
      },
      
      // User.tsx
      const { userId } = useParams();
      return (
        <h1>
          User with id {userId} is named: {users[Number(userId) - 1].name}
        </h1>
      );

useOutletContext

• 레이아웃 컴포넌트 만들때 유용
• 부모 컴포넌트가 어떤 공통 데이터나 상태를 자식 컴포넌트들에게 공유해주고 싶을때 사용