<step69>'react_router'

1) 

App.js

import './App.css';
import Header from './components/Header';
import Main from './components/Main';
import Product from './components/Product';
import DetailProduct from './components/DetailProduct';
import NotFound from './components/NotFound';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Detail1 from './components/Detail1';
import Detail2 from './components/Detail2';
import Info from './components/Info';

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Header/>
        {/* Routed컴포넌트는 여러 Route를 감싸서 그 중 url이 일치하는 라우트 단 하나만 렌더링 시켜줌
        Route는 path 속성에 경로, element 속성에 컴포넌트를 넣어줌 */}
      <Routes>
        <Route path="/" element={<Main/>}/>
        <Route path="/product/:productId/:productName" element={<Product/>}/>
        <Route path="/detail" element={<DetailProduct/>}>
          <Route path="detail1" element={<Detail1/>}/>
          <Route path="detail2" element={<Detail2/>}/>
        </Route>
        <Route path="info/*" element={<Info/>}/>
        {/* 상단에 위치하는 경로를 모두 확인, 일치하는 경로가 없는 경우 처리 */}
        <Route path="/*" element={<NotFound/>}/>
      </Routes>
      
    </div>
    </BrowserRouter>
  );
}

export default App;

App.css

.App {
  text-align: center;
}
.active {
  background-color: pink;
  color: #fff;
}

DetailProduct.js

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

const DetailProduct = () => {
    return (
        <div>
            상품 자세히 보기입니다.
            <Outlet/>
        </div>
    );
};

export default DetailProduct;

Header.js

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

const Header = () => {
    return (
        <div>
            <h1>GreenMall</h1>
            <ul>
                {/* a 태그와는 다르게 새로고침되지 않는다 */}
                {/* <li><a href="/">메인페이지</a></li> */}
                {/* <li><Link to="/">메인페이지</Link></li>
                <li><Link to="/product">상품페이지</Link></li>
                <li><Link to="/detail">상품 자세히보기</Link></li> */}
                {/* <NavLink> 링크 클릭 시 컴포넌트에 active클래스를 붙여줌 */}
                {/* ({isActive})=>isActive? "class" : "" : Active일 때 class를 붙여줌 */}
                <li><NavLink to="/" className={({isActive})=>isActive? "okay" : ""}>메인페이지</NavLink></li>
                <li><NavLink to="/product/*/*" className={({isActive})=>"green" + (isActive? "okay" : "")}>상품페이지</NavLink></li>
                <li><NavLink to="/detail" className={({isActive})=>isActive? "okay" : ""}>상품 자세히보기</NavLink></li>
                <li><NavLink to="/detail/detail1" className={({isActive})=>isActive? "okay" : ""}>1번 상품 자세히보기</NavLink></li>
                <li><NavLink to="/detail/detail2" className={({isActive})=>isActive? "okay" : ""}>2번 상품 자세히보기</NavLink></li>
                <li><NavLink to="/info" className={({isActive})=>isActive? "okay" : ""}>info 정보보기</NavLink></li>
            </ul>
        </div>
    );
};

export default Header;

Main.js

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

const Main = () => {
    return (
        <div>
            메인 페이지입니다.
            <ul>
                <li><Link to="/product/1/abc?search=productName&q=demo#text">1번 상품</Link></li>
                <li><Link to="/product/2/def?search=greengreen&q=demo#2번text">2번 상품</Link></li>
            </ul>
        </div>
    );
};

export default Main;

NotFound.js

import React from 'react';

const NotFound = () => {
    return (
        <div>
            페이지를 찾을 수 없습니다.
        </div>
    );
};

export default NotFound;

Product.js

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

const Product = () => {
    // useParams() 파라미터 값을 가지고 있는 객체를 반환
    const { productId, productName } = useParams();
    // useLocation() 쿼리스트링 값을 가지고 있는 객체를 반환
    const location = useLocation();
    console.log(useParams());
    console.log(useLocation());
    return (
        <div>
            { productId } 상품페이지입니다.
            <div>{productName} 페이지입니다.</div>
            <ul>
                <li>hash : {location.hash}</li>
                <li>pathname : {location.pathname}</li>
                <li>search : {location.search}</li>
                <li>key : {location.key}</li>
            </ul>
        </div>
    );
};

export default Product;

Detail1.js

import React from 'react';

const Detail1 = () => {
    return (
        <div>
            상세보기 1입니다.
        </div>
    );
};

export default Detail1;

Detail2.js

import React from 'react';

const Detail2 = () => {
    return (
        <div>
            상세보기 2입니다.
        </div>
    );
};

export default Detail2;

Info.js

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Info1 from './Info1';
import Info2 from './Info2';

const Info = () => {
    return (
        <div>
            정보 페이지입니다.
            <div>
                <Link to="info1">정보1</Link>
                <Link to="info2">정보2</Link>
            </div>
            <Routes>
                <Route path="info1" element={<Info1/>}/>
                <Route path="info2" element={<Info2/>}/>
            </Routes>
        </div>
    );
};

export default Info;

Info1.js

import React from 'react';

const Info1 = () => {
    return (
        <div>
            정보 서브 컴포넌트 1입니다.
        </div>
    );
};

export default Info1;

Info2.js

import React from 'react';

const Info2 = () => {
    return (
        <div>
            정보 서브 컴포넌트 2입니다.
        </div>
    );
};

export default Info2;