React Router(BrowserRouter, Routes, Route, Link)

react router(react-router-dom)
라우팅에 따라 다른 뷰를 보여주기 위해서 react에서는 react router라는 라이브러리를 많이 사용한다.

#라우팅(routing)
-다른 주소에 따라 다른 뷰를 보여주는 과정
-경로에 따라 변경한다 라는 의미
-react spa에서는 라우팅을 위해 react router라는 라이브러리를 가장 많이 사용한다.

---

#react router주요 컴포넌트
크게 세가지로 나뉜다.
라우터 역할을 하는 BrowserRouter
경로를 매칭해주는 Routes, Route
경로를 변경하는 역할을 하는 Link
이 컴포넌트들을 사용하기 위해서는 react router 라이브러리에서 따로 불러와야한다.

import {BrowserRouter, Routes, Route, Link} from "react-router-dom";

 

#react-router 라이브러리 설치

npm install react-router-dom@^6.3.0

---

# BrowserRouter
웹애플리케이션에서 html5의 history API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할수 있게해준다.
BrowserRouter가 상위에 작성되어 있어야 react router의 컴포넌트들을 사용할수있다.
-BrowserRouter는 React Router DOM이 사용되는 부분의 최상위 컴포넌트로 위치해야 한다.
-index.js에 넣어서 활용할수도있다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDom.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

 

# routes, route
경로를 매칭해주는 역할을 하는 컴포넌트이다.(route는 경로를 지정해주는데 사용한다)
-routes컴포넌트는 여러 route컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다. routes를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
-route컴포넌트는 path속성을 지정하여 해당 path에서 어떤 컴포넌트를 보여줄지 정한다. link컴포넌트가 정해주는 url경로와 일치하는 경우에만 작동된다.
-Routes 컴포넌트는 route 컴포넌트들을 감싸고 있어야한다.
-경로는 path로, 컴포넌트는 element로 연결해준다.
-만약 사용자가 지정된 주소인 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을수있다. 이럴때 사용할수있는속성이 path="*"이다.(정의하지않은 경로를 핸들링할수있다)
지정되지 않은 주소로 접근할시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게된다.

# link
-경로를 연결해주는 역할을 하는 컴포넌트이다. (사용자를 원하는 경로로 이동시켜주는 역할)
-a가 아닌 link를 쓴다.
a는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킨다. 즉 새로고침현상이 일어난다.
link는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 spa를 구현할수있다.
-to속성을 활용하여 path주소를 연결해준다.
-link컴포넌트는 클릭했을때, route의 path와 일치하는 페이지로 이동시킨다.

 

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;