router 셋팅

1. index.js 파일에 react-router-dom import한다.
2. BrowserRouter로 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>
); 

router로 페이지 나누기

1. App.js파일 상단에 여러거지 컴포넌트를 import 한다.
2. 만들고 그 안에 를 작성
3. <Route path="/url경로" element={ <보여줄html> } /> 경로를 설정함.

 (App.js)

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

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

페이지 이동 버튼

1. react-router-dom에서 Link 컴포넌트 import 한다.
2. 원하는 곳에 쓰면된다.

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

useNavigate

1. 페이지 이동 기능 useNavigate()

// useNavigate, Outlet 두 가지를 react-router-dom에서 import한다.
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

function App(){
  let navigate = useNavigate()
  
  return (
    <Nav.Link onClick={()=>{ navigate(-1)}}></Nav.Link>   // 1:뒤로 1번가기
    <Nav.Link onClick={()=>{ navigate(2)}}></Nav.Link>    // 앞으로 2번가기
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

2. 404 페이지 작성방법

//Route path="*" => * 모든경로를 의미하므로 path로 설정하지 않은 페이지 경로 모두를 나타낸다.
<Route path="*" element={ <div>없는페이지임</div> } />

3. 서브경로 만드는 nested routes

// Route 안에 Route를 넣는것을 nested routes라 함
// /about/member, /about/location 로 접속하면 된다.
<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>은 nested routes안의 element들을 어디에 보여줄지 표기하는 위치를 나타냄 
      <Outlet></Outlet>
    </div>
  )
}

URL파라미터으로 상세페이지 만들기

1. 데이터를 props로 다른페이지로 전송

(App.js)
// path에 /:를 사용 시 아무문자를 뜻한다.
<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>


(Detail.js)
// path=/detail/:id 이 부분 id를 가져오기 위해서는 useParams를 import한다.
// detail/:id/:id => id를 몇 번이고 추가 가능
import { useParams } from 'react-router-dom'

function Detail(){
  let {id} = useParams();
  console.log(id) //detail/이 부분에 입력한 값이 나온다.
  
  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 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[0].content}</p>
        <p>{props.shoes[0].price}원</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}

참고 문헌 및 사이트

• https://codingapple.com/