리액트 라우터

싱글 페이지 어플리케이션에서 링크를 통해 다른 페이지를 보여주면 새로고침이 되며 처음부터 데이터를 받아오게 된다.

리액트 내부에서 url을 바꿔줌으로써 새로고침 없이 화면을 전환할 수 있다.

• createBrowserRouter
• RouterProvider
• NavLink
• useParams
• Outlet
  
  
  
  

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { path: "", element: <HomePage /> },
      { path: "products", element: <Product /> },
      { path: "products/:productId", element: <ProductDetail /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

라우터를 계층화 하여 기본 url에서 자녀 url 설정을 할 수 있다.

<NavLink
  to="/"
  // 함수를 받는다. 함수는 객체를 받고 객체를 분해할당하여 내부의 isActive를 넣어줄 수 있다.
  className={({ isActive }) =>isActive ? classes.active : undefined}
  end
>

const params = useParams();

<p>{params.productId}</p>

path: "products/:productId" 이렇게 동적 라우팅을 한 url은 설정한 변수로 useParams을 이용하여 값을 가져올 수 있다.

<>
  <MainNavigation />
  <main>
    <Outlet />
  </main>
</>

Outlet을 사용하면 router에서 계층화할 때 기본이 되는 element 안에 children 페이지들을 넣을 위치를 정할 수 있다.
(없으면 페이지가 안보인다.)