[React] react-router-dom v6

react-router-dom은 리액트의 화면 전환을 도와준다. 리액트는 가상 돔을 사용해서 변화가 있는 컴포넌트만 업데이트를 해주기 때문에 굳이 화면을 새로고침을 할 필요가 없다. react-router-dom을 사용하면 새로고침없이 화면 전환이 가능하다.

 

 

 

---

 

터미널에 npm install react-router-dom

 

 

 

 

<BrowserRouter>

 

 

        <BrowserRouter>
        <Routes>
          <Route path="/주소1" element={< 컴포넌트1 />}/>
          <Route path="/주소2" element={< 컴포넌트2 />}/>
        </Routes>
        </BrowserRouter>

 

최상위 부모로 작성한다.

 

 

---

<HashRouter>

 

        <HashRouter>
        <Routes>
          <Route path="/주소1" element={< 컴포넌트1 />}/>
          <Route path="/주소2" element={< 컴포넌트2 />}/>
        </Routes>
        </HashRouter>

 

BrowserRouter와 똑같이 작성하지만 차이점은 url에 #이 붙는다 

 

BorwserRouter와 달리 # 때문에 SEO에 불리하다.

 

 

 

 

---

 

 

<Routes>

 

        <Routes>
          <Route path="/주소1" element={< 컴포넌트1 />}/>
          <Route path="/주소2" element={< 컴포넌트2 />}/>
        </Routes>

 

<Route>를 작성할때 부모로 사용한다.

 

 

---

 

<Route>

 

 <Route path="/주소" element={< 컴포넌트 />}/>

path에 작성한 url로 들어가면 element에 들어있는 컴포넌트를 보여준다.

 

 

---

 

<Link>

 

<Link  to = {`/주소`} > 
~~~
~~~
</Link>

 

 

<Link>는 a태그와 같은 하이퍼링크이지만 Link를 사용해야지 새로고침없는 화면 전환이 된다.

 

href대신 to를 사용한다.

 

 

---

<useLocation>

 

react-router-dom의 페이지 전환은 스크롤이 이동하지않고 그 자리에 위치해 있다.

 

페이지 전환을 할때 스크롤이 맨위 상단으로 고정시키고 싶다면 useLocation을 사용하면 된다.

// ScrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

 

 

// App.js
import { BrowserRouter } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';

function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
        <Routes>
          <Route path="/주소1" element={< 컴포넌트1 />}/>
          <Route path="/주소2" element={< 컴포넌트2 />}/>
        </Routes>
    </BrowserRouter>
  );
}