Jae Front-end Study

결과화면

1. react-router-dom 설치하기

react-router-dom 패키지를 설치한다.

설치가 완료되면 packae.json 파일에서 확인할 수 있다.

yarn add react-router-dom
또는
npm install react-router-dom

2. BrowerRouter 컴포넌트를 최상위 태그에 감싸기

• src/index.tsx

App 컴포넌트 위에 BrowerRouter 컴포넌트를 감싼다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

const root = ReactDOM.createRoot (
  document.getElementById('root') as HTMLElement
)

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
)

3. path를 설정하기

• src/App.tsx

path와 그에 해당하는 element 컴포넌트를 작성한다.

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import Layout from './components/layouts/Layout'
import MainPage from './pages/main'
import BoardPage from './pages/board'
import './assets/scss/common.scss'

const App = () => {
  return (
    <>
      {
        <Layout>
          <Routes>
            <Route path="/" element={<MainPage/>}/>
            <Route path="/board" element={<BoardPage/>}/>
          </Routes>
        </Layout>
      }
    </>
  )
}

export default App