02. router 셋팅하기

1. router 설치

npm i react-router-dom@6

2. index.js

import { BrowserRouter } from "react-router-dom";

   <BrowserRouter>
      <App />
    </BrowserRouter>

3. 컴포넌트를 import 해오기

import { Routes, Route, Link } from "react-router-dom";

Route : page

 <Route path="/경로" element={<div>보여질 영역 : 상세페이지</div>} />

<Link to="/경로">홈</Link>

 

Navigate

페이지 이동을 도와주는 함수

  let navigate = useNavigate();

<Nav.Link
              className="menu"
              onClick={() => {
                navigate("/detail");
              }}
            >
              Detail
            </Nav.Link>
            <Nav.Link
              className="menu"
              onClick={() => {
                navigate(1);
              }}
            >
              Gift
            </Nav.Link>

(1) onClick으로 경로이동시키기 navigate("/경로")

(2) navigate(num) ->(1) 앞으로 한페이지 이동해주세요 (-1)뒤로 한페이지 이동해주세요

404Page

* : 지정해놓은 라우터 이 외에 모든 것 

 <Route path="*" element={<div>없는 페이지에요</div>} />

nested routes

: tag 안에 tag

장점 : 여러 유사한 페이지 필요할 때 사용하기 좋음

 

[About.js]

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

const About = () => {
  return (
    <div>
      <h1> About: 회사정보임</h1>

      <Outlet></Outlet>
      {/* 구멍 */}
    </div>
  );
};

export default About;

outlet 으로 하위태그 위치 지정해줘야함

  <Route path="/about" element={<About />}>
          <Route path="member" element={<div>멤버임1</div>} />
          <Route path="location" element={<div>위치정보임2</div>} />
        </Route>

nested route 접속시엔 element 2개나 보임-> *Outlet으로 어디 보여줄지 작성해야함*

useParams

유저가 url파라미터에 입력한 거 가져오기위해 사용

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

const Item = (props) => {
 
  let { id } = useParams();
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
        {/* url 파라미터에 이상한 거 입력하면 id라는 변수가 이상하면 상품없다는 ul 보여주면 된다. */}
      </div>
    </div>
  );
};

export default Item;

(1)  useParams를 import 한다

(2) useParams 정보를 하나의 변수에 저장한다.

(3) 파라미터 값을 사용할 수 있다.

    <h4 className="pt-5">{props.shoes[id].title}</h4>

useParams가 0이면 shoes[0]인 상품이 보여진다.