React - Router 화면 이동

화면을 이동하기 위해서는 

npm i react-router-dom
npm i @types/react-router-dom

위 두 개를 설치해 준다.

 

index.tsx 파일에 <BrowserRouter>를 추가해 준다.

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
)

 

그 후 원하는 App.tsx에 라우터를 추가해 준다.

  const routes = [
      {path: "/Test",component : <Sample/>},
      {path: "/sample",component : <Sample/>},
  ]

  return(
      <Routes>
          {routes.map((route : {component : JSX.Element, path : string}, index : number) => (
              <Route path={route.path} element={route.component} />
          ))}
      </Routes>
)

위와 같이 작성한다면 routes에 필요한 url 경로를 작성하여 라우터를 추가할 수 있다.