react router 사용법

0. react router를 사용하는 이유

---

html css js는 html을 하나 더 만들면 그게 새로운 하나의 페이지가 되는데 

react는 html파일을 하나만 사용한다.

그래서 react는 다른 페이지를 요청하면 내부에 있는 <div>를 갈아치워서 보여주면 된다.

-> 이걸 코드로 짜서 해도되지만 귀찮으니깐 react-router-dom이라는 외부 라이브러리를 설치해서 구현하는게 일반적이다.

 

1. 설치법

---

react-router-dom 홈페이지를 보면되지만 

그냥 터미널에서 아래의 코드를 적어도된다.

npm install react-router-dom@6

 

그 다음 index.js에 가서 BrowseRouter를 import해와서 App을 감싸면 된다.

//index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
);

 

2. 사용법

---

Routes, Route, Link만 알면 페이지를 나눌 수 있다.

 

Routes, Route

 

1. <Routes>로 <Route>를 감싸고

2. path에 "/url경로"

3. element에 "보여줄html" 이렇게 작성하면된다.

//App.js
import { Routes, Route, Link } from 'react-router-dom'

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

 

메인 페이지는 "/"하나만 넣는다

접속시 보여줄 페이지를 넣으면 된다.

<Route path="/" element={ <div>메인페이지에서 보여줄거</div> } />

404페이지는 "*"를 넣으면된다.

*는 모든 경로를 뜻해서 설정해놓은 경로가 아니면 모두 이 경로로 안내해준다.

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

Link

유저들은 주소창에 url를 입력해서 들어가지 않는다.

그래서 link를 설정해줘야하는데

아래의 코드를 작성하고 클릭하면 각각의 url 경로로 이동한다.

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

 

link가 쓰기싫거나 뒤로가기 만들고싶다면 useNavigate()

link 태그가 못 생겨서 사용하기 싫다면 useNavigate를 사용해도된다.

onClick={()=>{ navigate('/detail') }적으면 /detail페이지로 이동가능하다.

 

그리고 뒤로가기 앞으로가기도 가능한데

-1넣으면 뒤로 1번가기

1 넣으면 앞으로 1번가기

-3넣으면 뒤로 3번가기 이다.

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
    <button onClick={()=>{ navigate(-1) }}>뒤로가기</button>
    <button onClick={()=>{ navigate(1) }}>앞으로가기</button>
  )
}

 

서브경로를 쉽게 만들고 싶다면 Outlet (nested routes)

 

/about/member로 접속하면 회사멤버 소개하는 페이지

/about/location으로 접속하면 회사위치 소개하는 페이지

를 만들고 싶다면

// 노가다로 이렇게 해도되지만
<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

// Nested routes 방식으로 해도된다.
<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

근데 이렇게 하면 <About /> 안보여줌 ㅋㅋ

그래서 Outlet을 사용해야한다.

About컴포넌트에서 Outlet부분을 추가하면 서브경로의 element가 추가된다.

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

 

URL 파라미터로 상세페이지 대량생성하고싶다면 :id, useParams()

쇼핑몰을 보면 

/object/1 

/object/2

/object/3 

/object/4

... 

이런식으로 물건개수만큼 상세페이지가 존재한다.

상세페이지를 하나씩 만들면 개발자들은 죽어가니:id와 useParams()를 사용하여 대량 생성하면된다.

path ="/detail/:id" 를 넣으면

datail/아무문자 입력했을 때 Detail컴포넌트를 보여준다. 

// 이렇게 만드는 대신
<Route path="/detail/0" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/1" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/2" element={ <Detail shoes={shoes}/> }/> 
...

// :id를 사용하자
<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

 

그 다음 Detail컴포넌트에서 useParams를 import해와서 :id위치에 넣은 문자를 가져와서 사용할 수 있다.

import { useParams } from 'react-router-dom' // useParams import해오기

function Detail(){
  let {id} = useParams(); // :id위치에 넣었던 문자 가져오기
  // detail/3 넣으면 3가져온다.
  // detail/abc 넣으면 abc가져온다.
  
  return (
    <div className="shoes_item">
      <img
        src={`https://codingapple1.github.io/shop/shoes${Number(id) + 1}.jpg`}
        width="50%"
      />
      <h4>{shoes[id].title}</h4>
      <p>{shoes[id].content}</p>
      <p>{shoes[id].price}</p>
    </div>
  )
}