[React] reactrouter로 여러개의 웹페이지 만들기

대부분의 웹 사이트는 하나 이상의 웹 페이지를 가지고 있어 여러 페이지를

자유자제로 이동할 수 있다. 

(예를 들어, 메인 페이지, 로그인 페이지, 상세 보기 페이지 등)

 

그럼 이런 여러 페이지의 이동을 리액트에서는 어떻게 만들 수 있을까?

바로 *react router를 사용하면 웹페이지 사이의 이동을 자유자제로 할 수 있다.

https://reactrouter.com/en/main 

Home v6.8.1

---

사용방법

(사용방법을 알기 전, 우선 여러개의 웹 페이지를 만들어 놓는다.)

1. Router 설치

우선 터미널을 킨 후 아래의 코드를 작성한 후 엔터를 누르면 설치가 완료된다.

npm install react-router-dom@6

---

2. index.js로 가기

index.js로 가서 맨 위에 아래코드를 붙여준다.

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

그 후 아래 코드처럼 <App/>을 감싸고 있는 <React.StrictMode>를 <BrowserRouter>로 바꿔준다.

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

---

3. App.js로 가기

App.js로 와서 맨 위에 import문을 추가해준다.

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

여기까지 했다면 이제 사용하기만 하면 된다.

기본적인 구조는 아래와 같다.

function App() {
  return (
    <div>
      <Routes>
        <Route path='/' element={<Homepage/>}/>
        <Route path='/login' element={<Login/>}/>
        <Route path='/detail' element={<Detail/>}/>
      </Routes>
    </div>
  );
}

• <Routes>: <Routes> </ Routes>안에 있는 <Route />들을 서로 스위치(변경) 해주는 역할 (이 밖에 있으면 스위치가 안됨)
• <Route />: <Routes>에 의해 바껴지는 것으로 속성값으로 path와 element가 있다.
• path: 각 페이지 주소
• element: 각 주소일때 보여주고 싶은 페이지

---

4. 결과 보기

여러개의 페이지가 만들어진 것을 볼 수 있다!

---

5. Link?

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

위의 import문에서 Routes, Route는 사용을 했는데 Link는 아직 사용을 하지 않았다.

Link는 어떻게 사용하는 것일까?

미리 말해보자면 Link는 <a>라고 생각하면 쉽다.

 

Homepage.js로 와서 아래와 같이 작성해준다.

import React from 'react'
import { Link } from 'react-router-dom'

const Homepage = () => {
  return (
    <div>
      홈페이지
      <Link to="/login">Go to login page.</Link>
    </div>
  )
}

export default Homepage

<Link>는 to라는 속성을 가지는데 어느 페이지로 이동할 건지를 적어주면 된다.

위의 코드는 to="/login"이기 때문에 저 링크를 클릭하면 로그인 페이지로 넘어갈 것이다.

---

6. useNavigate

다른 웹사이트를 보면 링크가 아닌

버튼을 눌렀을 때 다른 페이지로 이동하는 것을 많이 봤을 것이다.

그럴 때 사용하는 것이 useNavigate이다.

 

사용하는 방법은 React Hook이기 때문에 우선 위에 import문을 작성해 준다.

그리고 나는 navigate라는 변수에 담아주었다.

그 다음, 버튼 이벤트 함수 안에서 실행해주면 되는데 navigate( )안에는 본인이 가고 싶은 페이지의 주소를 적어주면 된다.

나는 홈페이지로 가고 싶기 때문에 /만 작성해 주었다.

import React from 'react'
import { useNavigate } from 'react-router-dom'

const Login = () => {
    const navigate = useNavigate()
    const goToHomepage=()=>{
        navigate("/")
    }

  return (
    <div>
      로그인페이지
      <button onClick={goToHomepage}>go to Homepage</button>
    </div>
  )
}

export default Login

버튼을 클릭했을 때