[React] react-router-dom

 

1. Routes + Route

<Routes>
	<Route path="/detail" element={<Detail/>}/>
	<Route path="/" element={<Main/>}/>
</Routes>

Routes는 Route들을 모아두는 요소이다.

Route의 element에는 어떤 페이지를 보여줄 것인지를 넣어준다.

import Detail from './detail/detail.js';

이런식으로 상세페이지를 js파일로 따로 만들어서 import 한 후 Route의 element로 쓸 수 있다.

 

<Route path="*" element={<div>404 페이지입니다.</div>}></Route>

또한 라우트로 지정한 path 외 *(모든 경로)를 지정하여 404 페이지를 만들 수도 있다.

 

 

2. Link

<Link className="menu" to="/cart">Cart</Link>

Link는 마치 HTML의 href와 같은 느낌이다.

to를 통해 어떤 링크로 갈지 적는다.

 

 

 

3. useNavigate

 

useNavigate처럼 use가 쓰인 것은 hook이라고 보면 된다. (ex useState)

무튼 이 훅은 Link와 같은 역할로 페이지를 이동시키는데, 장점으로는 원 내용을 훼손시키지 않는다는 것이다.

Link의 경우 a태그로 생성되어 기존 스타일을 무너뜨렸다면, useNavigate의 경우 기존 스타일을 무너뜨리지 않고, 속성처럼 삽입하여 쓸 수 있다.

 

 

 

위 이미지에서 Cart는 useNavigate를 썼다. 다른 요소는 기존 썼던 Nav.Link를 지우고, Link로 대체하니 기존 스타일이 깨진 것을 볼 수 있다.

<Navbar bg="dark" variant="dark">
	<Container>
		<Link className="menu" to="/" style={{fontWeight:"bold"}}>Sana Shop</Link>
		<Nav className="me-auto">
			<Link className="menu" to="/">Home</Link>
            <Link className="menu" to="/detail">상세페이지</Link>
			<Nav.Link onClick={()=>{Navigate('/cart')}}>Cart</Nav.Link>
		</Nav>
	</Container>
</Navbar>

 

때문에 Link보다는 navigate를 쓰는 것을 추천한다.

import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom';
import Detail from './detail/detail.js';

function App() {
  let navigate = useNavigate();
  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand>Sana Shop</Navbar.Brand>
          <Nav className="me-auto">
          <Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link>
            <Nav.Link onClick={()=>{navigate('/detail')}}>상세페이지</Nav.Link>
            <Nav.Link onClick={()=>{navigate('/cart')}}>Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      
    
      <Routes>
        <Route path="/detail" element={<Detail/>}/>
        <Route path="/" element={<Main/>}/>
      </Routes>

    </div>
  );
}

export default App;

 

useNavigate를 사용해 훅을 걸어주고, navigate 변수에 저장한다.

onclick을 이용해 내가 갈 경로를 navigate에 저장한다.

 

 

또한 유용한 기능이 있다. 바로 뒤로가기 앞으로 가기 기능도 가능하다는 것이다.

<Nav.Link onClick={()=>{navigate(-1)}}>Cart</Nav.Link>

-1은 뒤로 가기이고,

 

<Nav.Link onClick={()=>{navigate(1)}}>Cart</Nav.Link>

1은 앞으로 가기이다.

 

신기한 것은 적은 숫자만큼 이동한다. 즉 -2를 적으면 뒤로 2번 이동한다는 것이다.

 

 

4. nested Routes

라우터 중첩이 가능하다.

부모 라우터에 자식 라우터 여러개를 두는 형식이다.

<Route path="/event" element={<Event/>}>
	<Route path="one" element={<div>첫 주문시 양배추즙 서비스</div>}></Route>
	<Route path="two" element={<div>생일 기념 쿠폰받기</div>}></Route>
</Route>

function Event(){
  return(
    <>
      <div style={{fontSize:"30px", fontWeight:"bold"}}>오늘의 이벤트</div>
      <Outlet></Outlet>
    </>
  )

}

이런식으로 event라우터를 부모로 아래 one, two를 자식으로 두면,

one의 경로는 그냥 "/one"이 아닌 "/event/one"이 되는 것이다. 여기서 주의할 점은 자식 path에는 "/one"이 아닌 "one"이다. 앞에 슬래쉬가 붙지 않는 것이 특징이다. 슬래쉬 붙이면 에러난다.

 

여기서 <Outlet/>은 자식 링크의 컴포넌트가 어느 위치에서 보이면 좋을지 표시하는 용도이다.

이거 안써주면 자식 링크의 컴포넌트가 뜨지 않는다.

 

 

이런 느낌으로 뜬다.

 

 

5. 여러 개의 상세 페이지를 만들고 싶다면?

<Route path="/detail/:id" element={<Detail shoes={shoes}/>}/>

이런식으로 Route path에 :id라고 주면 된다.

 

그럼 상세페이지에서는 넘어오는 파람을 캐치해 id에 맞는 상품 정보를 출력하면 된다.

import {useParams} from 'react-router-dom';
let {id} = useParams();

만약 ~~/detail/0이 들어왔다면 id에는 0이 저장될 것이다.

 

 

근데 만약 sort 기능이 있어서 상품 리스트의 순서가 계속되서 변경이 된다면

 

let list = [

{id : 1},

{id : 0},

{id : 2}

]

 

나는 0번 상품을 알고 싶어서, 상품의 id인 0을 param으로 전달한다.

그 후 param을 얻어서 list[id]으로 접근하면, id가 1인 상품이 정보로 들어올 것이다. 띠용~~

 

그렇기에 list 전체를 돌려서 내가 param으로 들어온 id와 맞는지 매칭하고 리스트의 몇 번째에 있는지 알아야 한다.

let {id} = useParams();

  // 타겟 아이템 정보
  let target = 0 ;
  props.shoes.map((shoe, index)=>{
    if(shoe.id == id) target = index;
  })