[React] 리액트 시작하기(5) - 페이지 이동(React Router)

* 리액트 라우터(React Router)

: 페이지 이동 기능을 처리해 준다.

 

1. 설치

-npm

npm install react-router-dom

 

2. 사용예시

 

*App.js

import logo from './logo.svg';
import './App.css';
import Header from './component/Header';
import Main from './component/Main';
import Footer from './component/Footer';
import Product from './component/Product';
import { BrowserRouter, Routes, Route  } from 'react-router-dom';
import NotFound from './component/NotFound';
import React, { Component } from 'react';

function App() {
  
  return (
    <div>
      <BrowserRouter>
          <Header/>
              <Routes>
                  <Route path="/" element ={<Main/>}></Route >
                  <Route  path="/product/:productId" element ={<Product/>}></Route >
                  <Route  path="*" element={<NotFound/>}></Route >
              </Routes>
          <Footer/>
      </BrowserRouter>
    </div>

  );
}
export default App;

 

* Header.js

import 'bootstrap/dist/css/bootstrap.min.css';
import {Button} from "react-bootstrap";
import React from 'react';
import { Link } from 'react-router-dom';

function Header(props) {
    return (
        <div>
            <main>
            <Link to="/">
                <h1>여기는 헤더</h1>
                </Link>
            </main>
        </div>
    );
}

export default Header;

 

* Main.js

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

function Main(props) {
   const [timer, setTimer ] = useState("00:00:00");

   const currentTimer = () => {
    const date = new Date();
   
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    setTimer(`${hours}:${minutes}:${seconds}`)
   }

   const startTimer = () => {
    setInterval(currentTimer, 1000);
   }

   startTimer()

    return (
        
        <div>
            <main>
                <h1>여기는 메인</h1>
                <h1>{timer}</h1>
                <ul>
				<Link to="/product/1"><li>1번상품</li></Link>
				<Link to="/product/2"><li>2번상품</li></Link>
			</ul>
            </main>  
        </div>

        
    );   
}
export default Main;

 

* Product.js

import React from 'react';
import { useParams } from 'react-router-dom';
import { useLocation } from 'react-router-dom';

const Product = (props) => {
    const productId = useParams().productId;
    const location = useLocation();
    return (
        <div>
            <h3>{productId}번 상품 페이지 입니다.</h3>
            <ul>
                <li>hash : {location.hash}</li>
                <li>pathname : {location.pathname}</li>
                <li>search : {location.search}</li>
                <li>state : {location.state}</li>
                <li>key : {location.key}</li>
            </ul>
        </div>
    );
}

export default Product;

* NotFound.js

import React from 'react';

const NotFound = () =>{
    return (
        <div>
            404 Error
        </div>
    );
}

export default NotFound;

 

* 결과

localhost:3000

http://localhost:3000/product/1

* 여기는 헤더 클릭 시

http://localhost:3000/product/2

http://localhost:3000/아무거나

 

 

* 페이지이동 컴포넌트

컴포넌트	설명
<Routes>, <Route>	<Route>는 path속성에 경로, element 속성에는 컴포넌트를 넣음. ex>  <Route path="/" element ={<Main/>}></Route >
<Link>	import {Link} from 'react-router-dom'; <Link to="경로">링크명</Link>  <Link to="/">                 <h1>여기는 헤더</h1>                 </Link>

 

* ETC

URL 파라미터	경로에 :를 사용하여 설정 파라미터를 통해 상훔 id를 활용 할 수 있음 ex> localhost:3000/product/1  <Route  path="/product/:productId" element ={<Product/>}></Route >
useNavigate	뒤로가기 등에 사용하는 Hook

* useNavigate 추가된 Product.js

import React from 'react';
import { useParams } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';

const Product = (props) => {
    const productId = useParams().productId;
    const location = useLocation();
    const navigate = useNavigate();
    return (
        <div>
            <h3>{productId}번 상품 페이지 입니다.</h3>
            <ul>
                <li>hash : {location.hash}</li>
                <li>pathname : {location.pathname}</li>
                <li>search : {location.search}</li>
                <li>state : {location.state}</li>
                <li>key : {location.key}</li>
            </ul>

            <ul>
                <li><button onClick={() => navigate(-2)}>Go 2 pages back</button></li>
                <li><button onClick={() => navigate(-1)}>Go back</button></li>
                <li><button onClick={() => navigate(1)}>Go forward</button></li>
                <li><button onClick={() => navigate(2)}>Go 2 pages forward</button></li>
                <li><button onClick={() => navigate('/')}>Go Root</button></li>
                <li><button onClick={() => navigate('/', {replace: true})}>Go Root</button></li>
            </ul>
        </div>
    );
}

export default Product;

* 결과