131. [Reat] React Router TIL 23.02.20

---

 

[React Router]

오늘은 React Router에 대해서 공부했다. Router를 공부하면서 전에 프로젝트할 때 js로 url 요청했던 것들이 생각도 나서 익숙했음.

React Router는 간단하게 설명하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

 

1. 설치 

yarn add react-router-dom

 

2. 사용 예시

import './App.css';
import { createBrowserRouter, RouterProvider } from 'react-router-dom'; //여기 임포트해서 사용하면됨


const router = createBrowserRouter([{
  path: '/', // 경로
  element: <Root />,  //해당 경로에 나올 컴포넌트
  errorElement: <NotFound />,  //404에러시 컴포넌트
  children: [    // '/' <- 이거 자식 경로, 중첩라우팅 <Outlet /> 태그 사용
    { index: true, element: <Home /> },
    { path: '/browser', element: <Browser /> },
    { path: '/browser/:browserId', element: <BrowserDetail /> },
  ]
},

])

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

export default App;