Router

React Router : 링크를 연결해서 이동하기 위해 사용되는 라이브러리

기존 html에서 주소값을 이동할 때 사용한 방법 :
    <a href="html파일이름.html">이동하기</a>
    a 태그로 href를 이용할 경우 html 파일명을 작성해주는 것이기 때문에 React에서는 단순히 a 태그와 href만 사용할 수 없음
    -> React는 html 파일이 index.html 한 파일 밖에 없기 때문.
    -> 따라서 React는 Javascript로 이동해서 html 파일을 보여주므로 react-router-dom을 사용

* Router : 연결 경로를 자동으로 전환해서 연결해주는 기계
    - 연결 경로를 자동으로 전환해서 주는 기준
        : 고객(사용자)이 어떤 특정 화면이나 기능을 보고자해 웹 사이트에 요청할 경우 그 요청한 흐름대로 자연스럽게 보여주는 기능

설치 방법(택1)
    1. npm install react-router-dom
    2. npm i react-router-dom

router를 사용하기 위한 4가지 설정
    BrowserRouter : HTML에서 URL 전체 관리자 역할(History API 사용)
    Routes : 링크 모음을 나타내는 표현 태그
    Route : 어떤 링크가 어떤 js를 표현하는지 표기해주는 태그
    Link : 사용자가 누르고 이동할 수 있는 링크 생성. <a href>와 같은 역할

사용 방법
    <BrowserRouter> -> html에서 이러한 링크가 있다는 기록을 남김
        <Routes> -> 링크 표현 모음
            <Route path="이동할 링크" element={<javascript파일명/>}/>

            Home.js를 보길 원한다면
            <Route path="/" element={<Home/>}/> & Home.js를 import
        </Routes>
    </BrowserRouter>

주의 사항
    BrowserRouter는 index.js나 App.js에서 주로 사용
    만약 App.js를 index.js 바로 아래에서 사용하지 않는다면 index.js 바로 아래에서 표현되는 js 파일에서 표기

 

Router로 간단한 사이트 만들기

 

Home.js

import React from "react";

function Home() {
    return(
        <>
            <h1>홈페이지 메인입니다.</h1>
        </>
    )
}
export default Home;

 

About.js

import React from "react";

function About(){
    return(
        <>
            <h1>소개 페이지입니다.</h1>
            <p>귀사의 페이지에 오신 것을 환영합니다.</p>
        </>
    )
}
export default About;

 

Navbar.js

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

function Navbar() {
    return(
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul>
        </nav>
    )
}
export default Navbar;

 

SpringBoot + html에서는 <a href="/">Home</a>로 작성
React에서는 <Link to="/">Home</Link>로 작성 
a가 Link와 같고 href가 to와 같음

 

 

Contact.js

import React from "react";

function Contact(){
    return(
        <>
            <h1>회사 연락처</h1>
            <p>문의사항이 있으면 아래 연락처로 연락 주세요</p>
        </>
    )
}
export default Contact;

 

App.js

import { Routes, Route } from "react-router-dom";
import Home from "./component/Home";
import About from "./component/About";
import Navbar from "./component/Navbar";
import Contact from "./component/Contact";

function App() {
  return (
    <div>
      <Navbar/> {/*링크 모음집이 시작되기 전에 내비게이션 바에 이동경로가 보이게 설정*/}
      
      <Routes>{/* 링크 모음집 */}
      
        <Route path="/" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/contact" element={<Contact/>}/>
      </Routes>
    </div>
  );
}

export default App;

 

java에서 GetMapping("/") -> react에서 path="/"
java에서 return "html파일명" -> react 에서 element={<js파일명/>}
다만 index.js는 이미 React에서 사용하고 있는 이름이기 때문에 Index.js 나 index로 시작하는 이름은 피하는게 좋음

 

Home.html 페이지

 

숫자 맞추기 게임 페이지

 

각각의 페이지들은 nav를 통해 이동가능하다