[3] React.js 독학 - 라우팅 방법 (Route)

728x90

1. 라우터를 사용하기 위한 환경 세팅

터미널 창에 npm install react-router-dom을 입력해준다. ( 최근에 5 -> 6 버전으로 올라갔음 )

npm install react-router-dom@6

설치가 정상적으로 완료되면 package.json에 react-router-dom이 추가된 것을 확인 할 수 있다.

2. pages폴더 안에 About.js 파일 만들어주기

/pages/About.js
import React from "react";

function About() {
  return <h1>Home 화면 입니다</h1>;
}

export default About;

3. index.js 파일에 BrouserRouter 생성

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom"; // BrowserRouter 추가
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
); // brouserRouter 추가

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4. app.js

// app.js
import React from "react";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

import "./App.css";

function App() {
  return (
    <div className="App">
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
      <p>hello world</p>
    </div>
  );
}

export default App;

여기서 Link의 경우 a태그라고 보면 되고

home 버튼을 누르면 home.js 내용이..

about 버튼을 누르면 about.js 내용이 나오게 된다.