[TIL] React 'react-router-dom'으로 페이지 연결하기

메인페이지에서 로그인 버튼을 누르면 로그인 할 수 있는 페이지로 넘어가도록 연결해보자 ! 

 

 

1. 먼저 터미널에서 `react-router-dom` 설치한다.

npm install react-router-dom
또는
yarn add react-router-dom

 

// Home.jsx

import { useContext, useEffect, useState } from "react";
// 생략
import { Link } from "react-router-dom";
import Header from "../loginpages/Header.jsx";

function Home({ contents, setContents }) {
 
//생략

  return (
    <>
      <Header />
      <Container>
      
       // 생략
      
      </Container>
    </>
  );
}

export default Home;

// 생략
};

 

메인인 Home.jsx에 로그인과 회원가입 버튼을 브라우저 최상단 우측에 나열 하려고 하기 때문에 return에서 제일 위에 Header 컴포넌트를 넣어줬다(import도 잊지 않고 확인하기!).

 

2. router.jsx 파일 생성하기

// Router.jsx

import Home from './pages/Home';
import DetailPage from './pages/DetailPage';
import { BrowserRouter, Routes, Route } from "react-router-dom";
// 생략
import Login from './loginpages/Login';


const Router = () => {
  // 생략

  return (
    <ListContext.Provider value={{ contents }}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home contents={contents} setContents={setContents}/>} />
          <Route path="/DetailPage/:id" element={<DetailPage contents={contents} setContents={setContents}/> }/>
          <Route path="/Login" element={<Login/>}/>
        </Routes>
      </BrowserRouter>
    </ListContext.Provider>
  );

};

export default Router;

 

Routes 안에 저렇게 Login을 넣어준다(import도 확인).

 

3. App.jsx에 Router.jsx impot하기

//App.jsx

import Router from "./Router";
import "./App.css"; 


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

export default App;

 

4. 버튼 클릭 시 페이지 이동 구현하기 

// Header.jsx

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

const HeaderStyle = styled.div`
  display: flex;
  margin: 20px auto;
  justify-content: flex-end;
  gap: 10px;
  width: 1000px;
  cursor: pointer;
  
`;

function Header() {
  const navigate = useNavigate();

  const goToLogin = () => {
    navigate('/Login');
  }

  return (
    <>
     <HeaderStyle>
     <button onClick={goToLogin}>로그인</button>
     <button>회원가입</button>
     </HeaderStyle>
    </>
  )
}

export default Header

 

이제 로그인 버튼 클릭 시 로그인 페이지로 넘어가려고 한다. 

로그인 버튼에 onClick을 넣고 

useNavigate를 사용한다. 

Routes에 만들어둔 '/Login'으로 연결을 넣는다.

 

 

 

페이지 이동 성공 !