[관광데이터 공모전] React 페이지 이동 (React)

프로젝트를 진행을 하다보면 페이지 이동은 필수적으로 필요하다.

우리 프로젝트에서 페이지 이동이 필요했는데 나는 react-router-dom 이라는 것을 사용하여서 페이지 이동을 하였다.

 

React에선 페이지 이동을 react-router-dom이라는 것을 사용해서 페이지 이동을 할수가 있는데 이것을 사용하기 위해선 

제일먼저 react-router-dom이 설치가 되어있어야 한다.

 

그래서 일단은 react-router-dom을 설치해보자.

 

 

 

1. react-router-dom 설치

 

react-router-dom 설치하는 방법은 엄청 간단하다.

그냥 아래의 명령어를 터미널에서 입력을 해주면 된다.

 

npm install react-router-dom

 

그럼 아래 사진과 같이 성공적으로 설치가 되었다는것을 알수가 있다.

 

 

그럼 이제 react-router-dom을 사용할수가 있는데

일단은 react-router-dom에는 어떤것들이 포함되어있는지부터 살펴보자.

 

 

BrowserRouter

URL과 UI를 동기화해주는 라우터이다.

웹 애플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경이 가능하게 하고,

관련된 정보를 props로 쉽게 조회하거나 이용할 수 있게 해준다.

 

Route

컴포넌트에 path 속성을 이용하여 원하는 url를 지정해 그 url에 접속하면

해당 컴포넌트만 렌더링 된다.

즉, 사용자의 경로에 따라 다른 컴포넌트를 보여줄 수 있게 된다.

 

Route에서는 path 경로를 입력해야 하는데, path를 "/"로 지정한 것은 첫 페이지를 의미한다.

 

ex)

 

Routes

 

Routes는 Route로 구성된 자식컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링해준다.

 

각 URL에 따라 변경하고 싶은 컴포넌트를 Routes 태그로 감싸주면 되고,

Routes의 외부는 모든 페이지에서 공통으로 보여지는 부분이다.

 

 

Link

html의 링크 태그인 'a' 태그와 같은 개념이다.

html에서는 <a href=""></a>라고 작성했다면, 리액트에서는 <Link to=""></Link>로 작성한다.

페이지를 새로 불러오기 때문에, 기존 컴포넌트에서 들고 있던 상태값들이 날아가게 된다.

 

 

이제 이 내용들을 알았으니 한번 페이지 이동을 만들어보자.

 

일단은 메인페이지와 이동할 페이지를 만들어보자.

 

 

 

2. 메인페이지와 이동할 페이지 만들기

 

Main.js

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


function Main() {
  return (
    <div>
        <h1>Hi I'm Main</h1>
        <Link to="/sub">Go to Sub</Link>
    </div>
  );
}

export default Main;

 

Sub.js

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

function Sub() {
  return (
    <div>
        <h1>Hi I'm Sub</h1>
        <Link to="/">Go to Main</Link>
    </div>
  );
}

export default Sub;

 

Main에서는 Sub로  갈수있게 했고 Sub에선 Main으로 갈수 있게 했다.

 

 

그럼 이제 App.js로 가서 Route 설정을 해주도록 하자.

 

 

3. Route 설정하기

 

Route 는 아래와 같이 설정해주면 된다.

 

import {BrowserRouter,Routes,Route} from 'react-router-dom';
import React from 'react';
import Main from './main/Main';
import Sub from './sub/Sub'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main/>}></Route>
        <Route path="sub" element={<Sub/>}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

 

Route는 Routes 로 감싸주고

Routes는 BrowsRouter로 감싸주면 된다.

 

 

결과 화면

 

 

 

여기서 주의해야할점은 BrowseRouter 밖에는 다른 엘리먼트들이 있어서는 안된다.

 

ex)

 

이렇게 에러가 난다.

따로 넣어주고 싶다면 <BrowsRouter> 안에 넣어주면 된다.

 

ex)

 

 

그럼 아래와 같이 Route들 아래에 생성이 된다.

 

 

만약 그 Hi를 Route 사이에 넣어주고 싶어서 아래와 같이 한다면 

 

ex)

 

 

 

아래와 같은 에러를 발생하면서 실행이 되지 않는다.

 

Uncaught Error: [div] is not a <Route> component. 
All component children of <Routes> must be a <Route> or <React.Fragment>

 

 

따라서 그 사이에 무언가를 넣고 싶다면 메인페이지인 Main.js 에 집어넣어주면 된다.

Routes 안에는 Route를 제외한 다른 엘리먼트들이 들어갈수가 없다.

 

 

 

 

그럼 이제 페이지 이동에 대해서 배웠으니 다음 글에는 중첩 라우터에 대해서 호스팅을 하겠다.

.

.

.

.

.

.

.

.

.

.

 

https://wpioneer.tistory.com/252

[관광데이터 공모전] React 중첩 라우터 만들기