[React] Router ?

*설치 : 

npm install react-router-dom@6

 

*세팅 : index.js

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

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

 

페이지 나누기 

(App.js)

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

function App(){
  return (
    (생략)
    <Routes> // Routes 안에 Route를 작성 후 경로, 보여줄 html 넣어준다. 
      <Route path="/detail" element={ <div>상세페이지임</div> } /> 
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

 

페이지 이동 버튼 (LINK)

(잘 안씀)
<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

 

(이거 씀)
function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

*번외 : 이상한 경로로 접속했을 때 없는 페이지 보여주고 싶으면,

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

 

서브경로 

//Route 안에 Route 넣는걸 Nested routes라고 부름
<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

//About 컴포넌트 안에 div를 어디다 보여줄지 표기 해야됨 
function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet> 
    </div>
  )
}

 

 

URL 여러개 만들기 (파라미터 문법)

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

 

useParmas

//유저 URL파라미터에 입력한 가져오기 위한 훅
import { useParams } from 'react-router-dom' //import 

function Detail(props){

  let { id } = useParams();
  let 찾은상품 = props.shoes.find(function(x){
    return x.id == id
  });

  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">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>