Router

01. 설치하기

npm i react-router-dom@6.4

BrowserRouter

• react에서 router구현할 때 사용함
  -BrowserRouter, Routes, Route, Link 사용
  알지알지

createBrowserRouter

• react router 6.4부터 사용 가능!

• index.tsx에서 <RouterProveider> 임포트

<RouterProvider router={router}></RouterProvider>

-> props로 생성한 router 넘겨주기

createBrowserRouter()

자 먼저 Router.tsx를 만들고요

const router = createBrowserRouter([
    {
        path: '/',
        element: <Root />,
        children: [
            {
                path: '',
                element: <Home />,
            },
            {
                path: 'about',
                element: <About />,
            },
        ],
    },
]);

자 처음보는 친구들이져?

• createBrowserRouter 는 배열 형태로 경로들을 담음
• children 으로 하위 경로 쭉쭉 해주면 됩니다.
• / 의 자식 /about => 이해 완

root 경로인 <App/> 만 출력된다. 하위 경로 컴포넌트들을 출력하기 위해서 <Outlet />
을 추가한다.

function Root() {
    return (
        <div>
            <Header />
            <Outlet />
        </div>
    );
}

errorElement

경로가 없을 때 컴포넌트 렌더링에서 예외가 발생할 때, 컴포넌트가 충돌되었을 때 컴포넌트 렌더링에서 예외가 발생하여 오류 경로가 렌더링됨. 오류는 useRouteError로 사용 가능.

다른 멀쩡한 페이지가 에러의 영향을 받지 않게 해준다

useNavigate

유저를 어딘가로 보내는 기능.

const navigate = useNavigate();

    const onClick = () => {
        navigate('/about');
    };

useParams

useParams은 파라미터 정보를 가져와 활용하는 리액트 훅.

1.useParams를 import 한다.

2.정보를 하나의 변수에 저장

 const { userId } = useParams();

3.변수 사용하기

 return (
       <h1>
           user {userId}
       </h1>
   );

Outlet

하위 경로 요소를 렌더링하기 위해 상위 경로 요소에서 사용

root 아래에 children이 존재! 그래서 outlet -> children element로 변환해서 렌더링 됨
자식이라는 것만 알려주면 된다.

useOutletContext

하위 요소와 data를 공유하고 싶을 때 사용. 자식 route와 소통

<Outlet context={{  }}/>

context에 넘길 내용을 담아 자식에게 보내줌

 const ctx = useOutletContext();

자식요소는 useOutletContext()를 사용해서 받음