[React] React Router

라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것

1. 리액트 라우터 설치

해당 폴더로 이동 후 설치

npm install react-router-dom

• package.json 파일 열어 설치 잘 되었는지 확인

2. 프로젝트에 리액트 라우터 적용

src/index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from 'react-router-dom';
import reportWebVitals from "./reportWebVitals";
import App from './App';

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

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

);

reportWebVitals();

3. 페이지 컴포넌트 만들기

src/pages/Main.js.js

const Main = () => {
  return (
    <div>
      <h1>메인</h1>
      <p>메인 페이지</p>
    </div>
  );
};

export default Main;

src/pages/About.js.js

const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <p>소개 페이지</p>
    </div>
  );
};

export default About;

4.라우트 설정

src/App.js.js

import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Main';

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
};

export default App;

5. 다른 페이지로 이동 링크 만들기

src/pages/Main.js.js

import { Link } from 'react-router-dom';

const Main = () => {
  return (
    <div>
      <h1>메인</h1>
      <p>메인 페이지</p>
      
      <Link to="/about">소개</Link>
    </div>
  );
};

export default Main;