React-Router-Dom

라우팅(Routing)
: 요청에 따라 페이지를 이동하는 것

React-Router-Dom
: 리액트에서 사용하는 대표적인 Routing 라이브러리

설치

npm install react-router-dom

or

yarn add react-router-dom

---

주요 컴포넌트

1. BrowserRouter : HTML5의 History API를 사용하여 주소를 변경하는 것을 지원
2. Routes : 여러 개의 자식 Route 중 주소의 형태가 일치하는 Route를 매칭함
3. Route : 특정 주소 형태와 컴포넌트를 연결함
4. Router : Router 기능의 Context Provider
5. Link : 특정 주소와 일치하는 컴포넌트로 이동함

세부 설명

1. Route

<Route path='/' element={<Home />} /> 

• 속성
  • path: 주소 ('링크명', '링크명:id', '*' 등의 다양한 형태 가능)
  • element : 주소와 연결할 컴포넌트

2. Link

<Link to='링크명'>표시할 내용</Link>

• HTML의 a 태그와 동일한 역할을 수행함
• 속성
  • to : 주소

---

주요 Hook

1. useNavigate : 특정 주소로 이동함
2. useLocation: 현재 주소의 정보를 출력함
3. useParams : 주소에 입력한 Parameter(ex. /:id의 id)의 정보를 출력함

코드

• shared/Router.jsx

  import { BrowserRouter, Routes, Route } from "react-router-dom";
  import Home from "pages/Home";
  import Detail from "pages/Detail";
  import NotFound from "pages/NotFound";

  const Router = () => {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/:id" element={<Detail/>} />
          <Route path="*" element={<NotFound/>} />
        </Routes>
      </BrowserRouter>
    );
  };

  export default Router;

• Routing을 적용할 컴포넌트 (ex. App.jsx)

  import Router from "shared/Router";

  function App() {
    return <Router />;
  }

  export default App;

• pages/Home.jsx

  import { useNavigate } from "react-router-dom";

  function Home() {
    const navigate = useNavigate();
  
    return (
      <ExButton onClick={() => {navigate(`/detail/${id}`)}}></ExButton>
      <ExButton onClick={() => {navigate('/details')}}></ExButton>
    );
  }

• pages/Detail.jsx

  import { useLocation, useParams, Link } from "react-router-dom";

  function Detail() {
    const pageInfo = useLocation();
    const paramInfo = useParams();
    console.log(`pageInfo => ${pageInfo}`);
    console.log(`paramInfo => ${paramInfo}`);
  
    return (
      <Link to='/'>메인 페이지로 이동</Link>
    );
  }

  /* 결과 (ex. detail/12345) */
  pageInfo => { pathname: '/detail/12345`, search: '', hash: '', state: null, key: 'default' }
  paramInfo => { id: '12345' }