디독 - 리액트 라우팅 방법 (react-router-dom 설치)

리액트 라우팅 방법 (react-router-dom 설치)

1. react-router-dom 설치
npm install react-router-dom

2. src폴더 밑에 폴더 3개를 만든다.
pages, components, router

3. 각 폴더 밑에 tsx파일을 만든다.
(1) pages/UserInfo.tsx
(2) pages/Home.tsx

(3) components/Header.tsx
(4) components/Footer.tsx

(5) router/index.tsx

4. 파일내용
src/pages/UserInfo.tsx

export default function UserInfo() {
return <h1>User Info Page</h1>;
}

src/pages/Home.tsx

export default function Home() {
return <h1>Home Page</h1>;
}

src/router/index.tsx

import { createBrowserRouter } from 'react-router-dom'
import Home from '../pages/Home'
import UserInfo from '../pages/UserInfo'

export const router = createBrowserRouter([
{ path: '/', element: <Home /> },
{ path: '/user-info', element: <UserInfo /> },
])

src/App.tsx

import { RouterProvider } from 'react-router-dom'
import { router } from './router'

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

export default App