[React] react router dom

/detail 로 접속하면 상세페이지를,
/cart 로 접속하면 장바구니 페이지를 보여주자.

1. React에서 페이지를 나누는 방법

1. 컴포넌트를 만들어서 상세페이지 내용을 만든다.
2. /detail 로 접속하면 그 컴포넌트를 보여준다.
3. React-router-dom 라이브러리로 쉽게 구현할 수 있다.

2. React-router-dom 설치

https://v5.reactrouter.com/web/guides/quick-start
해당 사이트에서 제공하는 문서를 보고 설치하자.
찾기가 어렵다

npm install react-router-dom
npm install react-router-dom@6

3. 셋팅하기

src/index.js 파일로 가서 <BrowserRouter> 로 <App />을 감싸면 된다.

// src/index.js

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

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

4. react-router-dom 사용법

4-1. 라우터로 페이지 나누는 법

• 상단에 여러가지 컴포넌트를 import 한다.
• <Routes> 만들고 그 안에 <Route>를 작성한다.
• <Route path="/경로" element={<Component />} /> 작성 ````javascript // App.js

import { Routes, Route, Link } from ‘react-router-dom’

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

### 4-2. 페이지 이동, Link
상단에 Link 컴포넌트를 import한다.   
원하는곳에 Link를 쓴다.
````javascript
<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

4-3. 페이지 이동, useNavigate()

useNavigate()를 쓰면 그 자리에 유용한 함수가 남는다. 페이지를 이동시켜주는 함수다.
navigate(“/detail”) : /detail 페이지로 이동
navigate(-1) : 뒤로 1번
navigate(2) : 앞으로 2번

// App.js
import { useNavigate } from 'react-router-dom'

function App(){
  let navigate = useNavigate()

  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

4-4. 404 페이지 설정

없는 경로로 접속했을 때 404 페이지 보여주는 방법은
Route path에 * (모든경로)를 넣어준다.

<Route path="*" element={ <div>404</div> } />

4-5. 서브경로를 만들 수 있는 Nested routes / Outlet

/about/member 로 접속하면 회사 멤버 소개하는 페이지
/about/locaion 으로 접속하면 회사 위치 소개하는 페이지를 띄우는 법

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

이렇게 만들어도 되지만

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <Members /> } />
  <Route path="location" element={ <Location /> } />
</Route>

이렇게 만들어도 된다.

<Route> 안에 <Route>를 넣을 수 있는데 이것을 Nested routes 라고 한다.

이렇게 사용하면
/about/member 로 접속 시 <About />과 <Members />을 보여준다.
/about/location 으로 접속 시 <About />과 <Location />를 보여준다.

About Component 안에 element 들은 Outlet 컴포넌트 안에 보여진다.

function About () {
  return (
    <div>
      <h4>about</h4>
      <Outlet />	// 이 자리에 Members or Location이 표시된다.
    </div>
  )
}