셋째주 #13 react js - ROUTER v6

일정이 변경되서 챌린지가 하나 더 생겼다. 라우터 챌린지~!

createBrowserRouter

• 라우터를 배열 형식으로 표현 가능
• DOM History API 사용해서 URL 업데이트, 기록 스택을 관리.

📂 index.js
render 대상 변경

• <App /> 대신에 RouterProvider render
• <RouterProvider router={router} /> (Router.js)
• router라는 prop을 가지는데 createBrowserRouter로 만든 router임

📂 Router.js
1. const router = createBrowserRouter([]) 생성
2. {} 안에 path와 element 정하기. (render 될 컴포넌트)
3. path: “/“ 를 부모로 생각하고 children에 하위 페이지 생성
4. 자식을 렌더링 하려면 해당 컴포넌트에 <Outlet /> 사용
5. 해당 컴포넌트의 자식이 있다면 Outlet이 자식을 render해줌
6. 자식 컴포넌트에서 Link 를 사용할때 경로는?
1. to=“/subpage” -> / 를 사용하면 root부터 시작되는 절대경로
2. to=“subpage” -> 상대 경로로 현재 있는 경로 다음에 추가됨.

📂 Router.js
import { createBrowserRouter } from "react-router-dom" 
const router = createBrowserRouter([
{ //route의 컨테이너라고 보자
path: "/", //url , location이 url과 일치하면 element를 render
element: < Root />, //<App>
loader: rootLoader,
children: [ { path: "team", element: < Team />, loader: teamLoader } ]
},
]);

errorElement

• createBrowserRouter와 같은 데이터 라우터를 사용하는 경우에 작동함
• 컴포넌트 렌더링에서 예외 발생시 오류를 useRouteError로 처리 할 수 있다.
• 다른 멀쩡한 페이지가 에러의 영향을 받지 않게끔 해준다.

router.js 에서 path: “/“ 아래에 errorElement 추가해준다.
1. <Root /> element path에 에러를 추가함.

• 아무 자식도 발견되지 않을때 <NotFound /> 보여줌

2.<Home /> path: “” 에다가 errorElement 추가하면 홈 컴포넌트가 충돌이 나더라도 앱이 안죽고 다른 페이지는 보임.

• errorElement: <Error />

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
     {
    	path: "",
    	element: <Home />,
    	errorElement: <ErrorComponent /> // Home crashed 나면 뜸
  	 }
	],
    errorElement: <NotFound /> // path 지정 안된 곳에 뜸
  }
]);

Link와 Router

• 링크는 to 프로퍼티로 특정 url을 지정해준다.
• 특정 url에서 무슨 컴포넌트를 보여줄지는 Router에서 !
• path: url, element: 보여줄 컴포넌트

동적 URL 는 : 를 사용한다

• Router path 에서 users/:userId element: <User />
• <User /> 컴포넌트에서 useParmas 사용해서 userId 값 얻어내기

useNavigate

• 유저의 클릭없이 코드로 특정 페이지로 이동시키고 싶을 때.
  const navigate = useNavigate();
navigate("/about");
navigate(-1) : 뒤로 가게하기

참고 : loader 및 action에서 redirect 하는 것과 차이가 뭔지??

useOutletContext

• 상위 경로는 하위 경로와 state 또는 기타 값을 공유할 수 있다
• context provider를 만드는 것도 있지만 Outlet에 기본 제공되는 context를 사용할 수도 있다

📂 User.js //상위 컴포넌트
<Outlet context={{
	nameofMyUser: user[Number(userId) -1].name,
 }}
/>

📂 Followers.js // 하위 컴포넌트
function Followers() {
	const ctx = useOutletContext();
  	console.log(ctx) // 값 콘솔로 확인
  
  	const {nameofMyUser} = useOutletContext(); // 값 가져옴
}

코드샌드박스로 라우터 연습하기
https://codesandbox.io/s/react-router-v6-yeonseub-ock23r