React Router 라우팅하기

※ 리액트 = 싱글페이지 애플리케이션 = 페이지를 1개만 씀!   ==>   a태그 못씀!

✅ router 라이브러리 설치하기

https://www.npmjs.com/package/react-router-dom

react-router-dom

npm i react-router-dom

 

 

✅ router 적용하기

🔎 라우팅이란?
- 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
- 가장 많이 쓰는 라이브러리 = 리액트 라우터(React Router)
- React Router :  신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리

 

1️⃣ 라우팅하기

🔎 Router 활용하기
1. <BrowserRouter>태그로 컴포넌트 사용하기
2. <Routes> 컴포넌트 :  여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시킴
3. <Route> 컴포넌트 :  path속 성에 경로, element 속성에는 컴포넌트를 넣어줌
⭐ 하위 경로에 여러 라우팅을 매칭시키고 싶다면 URL뒤에 *을 사용하여 일치시킬 수 있음
<Route path="main/*" />

4. <Link> 컴포넌트 :  <Link to="경로">링크명</Link>

 

① <App/>을 <BrowserRouter>로 감싸기 (index.js)

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

reportWebVitals();

 

② HomePage & LoginPage 라우팅하기 (App.js)

function App() {
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={<HomePage/>} />
        <Route path="/login" element={<LoginPage/>} />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

➡ path가 "/"면 HomePage & LoginPage components를 읽을 것이라는 말

➡ 결국, 페이지는 하나고 객체만 바꿔치기 함!

 

⭐ exact={true} 를 꼭 넣어줘야 주소를 제대로 읽어줌!

 

 

 

2️⃣ 클릭했을 때 이동하기

 <Link to="경로">링크명</Link>

 

① Link to 태그로 링크 걸기

const Header = () => {
  return (
    <HeaderMenu backgroundColor="blue">
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/login">로그인</Link>
        </li>
      </ul>
    </HeaderMenu>
  );
};

export default Header;

 

② 실행해보기

"/" 홈

 

"/login" 로그인

 

 

3️⃣ useParams 값으로 데이터 넘기기 ( v6부터 기존 match.params이 변경됨 )

🔎 useParams 
: Route path와 URL의 매칭에 대한 정보를 가지고 있음
- isExact:true이면 경로가 완전히 정확한 경우에만 수행함
- params: 경로에 전달된 파라미터 값을 가진 객체
- path: Route에 정의된 경로
- url: 클라이언트로부터 실제 요청 받은 경로

function App() {
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={<HomePage/>} />
        <Route path="/login/:id" element={<LoginPage/>} />
      </Routes>
      <Footer />
    </div>
  );
}

•  :style 를 route path에 사용하면 useParams()로 이를 불러와 사용할 수 있다.
• : 뒤에 나오는 부분이 params의 key 부분이 되어 :id는 id가 key가 되어 불러옴

 

 

 

4️⃣ useNavigate로 뒤로가기 & 홈으로가기 ( v6부터 기존 history 선언 방식이 변경됨 => history의 모든 기능이 useNavigate로 통합됨)

① 뒤로가기

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import Login from '../components/login/Login';

const LoginPage = () => {
  const navigate = useNavigate();
  const goBack = () => {
    navigate(-1);
  };
  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <Login />
    </div>
  );
};

export default LoginPage;

② 홈으로 가기

const LoginPage = () => {
  const navigate = useNavigate();
  const goBack = () => {
    navigate(-1);
  };

  const goHome = ()=>{
    navigate('/');
  }

  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <button onClick={goHome}>홈으로</button>
      <Login />
    </div>
  );
};

 

5️⃣ Link 디자인하기

: Link라는 class가 없기 때문에 상속해서 써야 함

const HeaderLink = styled(Link)`
  color: red;
`;

const Header = () => {
  return (
    <HeaderMenu backgroundColor="blue">
      <ul>
        <li>
          <HeaderLink to="/">홈</HeaderLink>
        </li>
        <li>
          <HeaderLink to="/login/10">로그인</HeaderLink>
        </li>
      </ul>
    </HeaderMenu>
  );
};

 

 

 

6️⃣ 부트스트랩 사용하기1 - button

https://react-bootstrap.github.io/getting-started/introduction

React-Bootstrap

npm install react-bootstrap bootstrap

 

① Home.js에 button 만들고

import { Button } from 'react-bootstrap';

<button variant="primary">Primary</button>{' '}

 

② App.js에 import하기

import 'bootstrap/dist/css/bootstrap.min.css';

 

③ 실행

 

7️⃣ 부트스트랩 사용하기2 - navbar

import React from 'react';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

const HeaderMenu = styled.div`
  border: 1px solid black;
  height: 300px;
  background-color: ${(props) => props.backgroundColor};
`;

const HeaderLink = styled(Link)`
  color: red;
`;

const Header = () => {
  return (
    <div>
      <HeaderMenu backgroundColor="blue">
        <ul>
          <li>
            <HeaderLink to="/">홈</HeaderLink>
          </li>
          <li>
            <HeaderLink to="/login/10">로그인</HeaderLink>
          </li>
        </ul>
      </HeaderMenu>

      <>
        <Navbar bg="dark" variant="dark">
          <Container>
            <Navbar.Brand href="#home">Navbar</Navbar.Brand>
            <Nav className="me-auto">
              <Link to="/" className="nav-link">
                Home
              </Link>
              <Link to="/login" className="nav-link">
                Login
              </Link>
            </Nav>
          </Container>
        </Navbar>
      </>
    </div>
  );
};

export default Header;

➡ href로 링크를 이동하면 페이지가 reload 되므로 Link to로 변경 후 className을 걸어준다!

(※ className은 bootstrap 홈페이지 참고)