a태그 대신 react-router-dom으로 링크 연결하기

REACT-ROUTER-DOM 기능별 설명

BrowesrRouter as Router

메뉴의 모든것을 감싸는 최상의 컴포넌트.

컴포넌트명이 길어서 보통 Router 로 줄여서 쓴다.

 

Link 컴포넌트

a태그는 그 링크로 이동시켜줘서 더이상 사용을 못함

history.pushState()처럼 url만 바꿔주는 기능을 사용해야함

그게 Link 컴포넌트.

Routes 컴포넌트

여기부터가 메뉴야! 메뉴의 범위를 지정해준다.

컴포넌트가 보여줄 영역을 감싸는 컴포넌트.

 

Route 컴포넌트

메뉴 하나당 하나씩 할당할 수 있으며, URI에 맞는 컴포넌트를 찾아주는 컴포넌트.

 

 

 

---

react-router-dom 설치하기

버젼 V6 (21.12.17)에 나온 기능이다.

이전 버전과는 차이가 있으니 사용하는 버전을 알고 사용하자.

npm i react-router-dom

 

 

 

root폴더에 불러와서 App을 감싸기

Context API로 전역변수를 만들었을때 최상위에 올려놨던것처럼 라우터도 마찬가지다.

가장 최상위인 App 컴포넌트 안에서 사용하자

//index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

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

 

 

 

각 주소에 맞게 컴포넌트를 배분하기

이렇게 작성하면 첫 화면에서 <Home /> 컴포넌트가 보이게 된다.

//App.js
import { Routes, Route } from "react-router-dom";
import Home from "./pages/home";
import Navbar from "./components/Nav/Navbar";
import Join from "./components/join";

const App = () => {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" index element={<Home />}></Route>
        <Route path="/join" element={<Join />}></Route>
      </Routes>
    </>
  );
};

export default App;

 

Routes에 감싸져있는 코드를 a태그를 사용해서 작성하면 다음과 같다.

  <nav>
    <a href="/">Home</a>
    <a href="/join">Join</a>
  </nav>

• path에는 url 주소를, element에는 url이 바뀔때 렌더링할 컴포넌트를 작성한다.
• index는 index={true}가 간략화된것으로 맨 처음에 나오게 하고싶은 컴포넌트에 작성한다.
• 링크를 이동시켜주는 a태그대신 url만 변하게해주는 Link 컴포넌트를 작성한다.
• 내부적으로는 a태그를 가지고있으므로 css에서 a태그에 대한 스타일을 받아들인다.

 

 

 

Link를 통해서 해당 주소로 이동하기

//Navbar.jsx
import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <>
      <Nav>
        <div className="navDiv">
          <ul>
            <li>
              <Link to="/">Main</Link>
            </li>
            <li>
              <Link to="/board">Board</Link>
            </li>
            <li>
              <Link to="/join">Join</Link>
            </li>
          </ul>
        </div>
      </Nav>
    </>
  );
};

export default Navbar;