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

프로젝트를 진행하다가 페이지 내에서의 페이지 이동이 따로 필요 했었다.

그래서 여러 방법을 찾아보다가 React의 중첩 라우터에 대해서 알게 되었다.

 

 

그럼 이제 React의 중첩 라우터하는 방법에 대해서 알아보자.

 

 

중첩 라우터란?

 

중첩 라우터란 이동한 페이지 내에서 다른 페이지로 이동해야하는 경우가 생길때 사용하는것이다.

 

ex)

사진과 같이 특정 페이지 내에서 네비게이션 바가 필요할때

 

 

 

그럼 이제 중첩 라우터를 실행하는 방법에 대해서 알아보자.

 

 

 

 

 

1. 중첩 라우터에서 보여줄 페이지들을 먼저 만든다.

 

One.js

function One() {
    return (
        <h1>This is One</h1>
    );
}

export default One;

 

 

 

Two.js

function Two() {
    return (
        <h1>This is Two</h1>
    );
}

export default Two;

 

 

 

2. 만든 페이지들을 Routes 안에 담아준다.

 

import React from 'react';
import {Link,Routes,Route, useNavigate} from 'react-router-dom';
import One from './navbar/One';
import Two from './navbar/Two';

function Sub() {

  return (
    <div>
        <h1>Hi I'm Sub</h1>
        <Link to="/">Go to Main</Link>
        <hr></hr>
        <Routes>
          <Route path="/one" element={<One/>}></Route>
          <Route path="/two" element={<Two/>}></Route>
        </Routes>
    </div>
  );
}

export default Sub;

 

 

 

 

3. 특정 이벤트에서 페이지 이동을 하도록 만든다.

 

 

 

페이지 이동에는 3가지 방법이 있는데 Link를 이용하는 방법과 useNavigate를 이용하는 방법과 window.location.href를

이용하는 방법이 있다.

 

Link와 window.location.href는 우리가 설정한 경로대로 이동을 하기 때문에 중첩 라우터에서 경로를 설정을 한다고 하면

경로를 완벽하게 설정을 해줘야 한다.

하지만 useNavigate를 사용한다면 해당 페이지 내에서 페이지 이동이 이루어지는것이기 때문에 Route의 path만 적어줘도 된다.

 

import React from 'react';
import {Link,Routes,Route, useNavigate} from 'react-router-dom';
import One from './navbar/One';
import Two from './navbar/Two';

function Sub() {

  const navigate = useNavigate()

  const showOne = () => {
    window.location.href="/sub/one"
  }

  const showTwo = () => {
    navigate("two")
  }

  return (
    <div>
        <h1>Hi I'm Sub</h1>
        <Link to="/">Go to Main</Link>
        <hr></hr>
        <button onClick={showOne}>show one</button>
        <button onClick={showTwo}>show two</button>
        
        <Link to="/sub/one">show one</Link>
        <Routes>
          <Route path="/one" element={<One/>}></Route>
          <Route path="/two" element={<Two/>}></Route>
        </Routes>
    </div>
  );
}

export default Sub;

 

 

 

그러면 아래와 같은 화면이 나올것이다.

 

 

 

하지만 여기서 주의해야할점이 있다.

 

 

 

 

※주의사항

중첩 라우팅을 만들땐 맨 바깥에 있는 Route는 /경로명/* 을 입력을 해줘야 한다.

 

ex)

 

 

이렇게 해줘야지만 그 이후에 오는 경로에 다른 경로가 와도 보여줄수 있기 때문이다.

 

 

 

이제 중첩 라우팅을 만들었으니 화면 내에서 입력한 내용들을 체크하는 유효성 체크에 대해서 설명을 하겠다.

 

.

.

.

.

.

.

.

.

.

.

.

https://wpioneer.tistory.com/253

[관광데이터 공모전] React 유효성 검사 방법