TIL_React-Router

💡 React Router 라이브러리

다른 주소에 따라 다른 뷰를 보여주는 리액트 SPA를 위한 라이브러리

🔍 React Router의 주요 컴포넌트

router	route matchers	route changers
<BrowserRouter>	<Routes>	<Link>
	<Route>

• router : 라우터 역할
• route matcher : 경로 매칭
• route changer : 경로 변경

🔍 React Router 설치

npm install react-router-dom@^[버전]6.3.0

🔍 React Router 불러오기

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

필요한 Router라이브러리의 컴포넌트를 가져오면 된다.

🔍 React Router 적용하기

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;

BrowserRouter로 Router의 범위를 잡아주고,
Routes로 경로에 따라 나올 엘리먼트의 영역을 잡아준다.
그리고, Route의 path로 경로를 지정해주고 element로 나올 컴포넌트를 연결시켜준다.
마지막으로, link 태그로 클릭할 요소를 감싸준 후, to 속성을 통해 클릭 시 랜더링 될 경로를 지정해준다.

---

위의 코드처럼, App.js에 BrowserRouter를 넣어줄 수 있지만, 이렇게 되면 너무 좁은 범위에서 Router의 컴포넌트를 사용해야된다는 단점이 있다.

그래서 현업에서는 App.js보다 index.js에서

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

이런 방식으로 더 넓게 BrowserRouter영역을 지정해준다.

📌 useNavigate()

useNavigate를 사용하여 SPA방식으로 뒤로가기, 앞으로 가기와 같은 기능을 구현할 수 있다.

import { BrowserRouter, Route, Routes, useNavigate} from 'react-router-dom';

React-router의 컴포넌트이므로 import를 해준다.

해당 기능을 구현할 컴포넌트에 코드를 작성하면되는데, 일단 예시로 App 컴포넌트에 작성해보겠다.

const App = () => {
	const navigate = useNavigate();
  	return (
      <div>
        <button onClick = {()=> navigate(-1)}> 뒤로가기 </button>
        <button onClick = {()=> navigate(1)}> 앞으로가기 </button>
        <button onClick = {()=> navigate('/mypage')}> mypage로 가기 </button>
        <button onClick = {()=> navigate('/about')}> about으로 가기 </button>
}