[React] React Router Dom

패키지 설치하기

yarn add react-router-dom

1. 페이지(원래 단일 페이지) 컴포넌트 작성 -> 다중 페이지
2. Router.js 파일 생성. router를 구성하는 설정 코드 작성
   (ex : redux 할 때도 설정 파일을 따로 만들어 주입함)
3. App.jsx import 하고(2번) 적용 : 주입
4. 페이지 이동 테스트

원래 페이지
localhost:3000/여기 router라는 주소가 들어간다.

React router hook

useNavigate

: 특정 버튼을 눌렀을 때, 다른 페이지로 이동하도록 하는 기능을 제공한다.  
html의 a 태그랑 비슷하다

/* pages > Works,jsx */
function Works() {
    const navigate = useNavigate();
return (
    <div>
      Works
      <br />
      <button
        onClick={() => {
            navigate("/"); // HOME은 / 뒤에 아무것도 없는 상태.
        }}
      >
        HOME으로 이동
      </button>
      <br />
    </div>
  );
}

▶️ 버튼을 누르면 Home 페이지로 이동할 수 있다.

 

Link (Hook은 아님.  API)

: a 태그 기능을 대체하는 API

<Link to="/contact">contact 페이지로 이동하기</Link>

▶️ to="" 원하는 경로를 작성

 

Layout 을 공통으로 가지고 가기.

const Router = () => {
  return (
    <BrowserRouter>
        <Layout>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="about" element={<About />} />
            <Route path="contact" element={<Contact />} />
            <Route path="works" element={<Works />} />
          </Routes>
        </Layout>
    </BrowserRouter>
  );
};

▶️ <Routes>를 <Layout>의 children을 가지고 간다.

function Layout({children}){
  return (
    <div>
      <Header />
      <div style={{...layoutStyles}}>
        {children}
      </div>
      <Footer />
    </div>
  );
}

▶️ <Header /> 와 <Footer /> children의 값을 넣어줌으로써, <Header /> 와 <Footer /> 는 고정적으로 움직인다.