라우팅

〰 라우팅

react-router-dom이라는 공식 라이브러리를 설치

npm install react-router-dom@5 

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

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

❗  BrowserRouter 말고 HashRouter 라는 태그도 이용할 수 있습니다.

• HashRouter를 복붙하시면 사이트 방문시 URL 맨 뒤에 /#/이 붙은채로 시작합니다.
• BrowserRouter를 복붙하시면 사이트 방문시 # 그런거 없이 깔끔해집니다.

〰 페이지 나누기

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

function App(){
  return (
    <div>
      HTML 잔뜩있는 곳 
      <Route path="/"> 
        <div>메인페이지</div>
      </Route>
      <Route path="/detail">
        <div>상세페이지</div>
      </Route>
    </div>
  )
}

〰 Link

function App(){
  return (
    <div>
      <Navbar>
         <Nav.Link> <Link>Home</Link> </Nav.Link>
         <Nav.Link> <Link>상세페이지</Link> </Nav.Link>
      </Navbar> 
      <나머지HTML/>
    </div>
  )
}

<Nav.Link> <Link to="/">Home</Link> </Nav.Link>

❗  to 라는 속성을 이용해서 경로를 적어 페이지 이동

〰 :id

<Route path="/상세페이지/:id">
     <상세페이지/>
</Route>

<h4>{props.데이터[:id자리에 있던숫자]}</h4>

❗   useParams() 라는 훅을 사용

import { useHistory, useParams } from 'react-router-dom';

let { id } = useParams()

useParams() 라는 함수는 현재 URL에 적힌 모든 파라미터를 {파라미터1,파라미터2} 이런 식으로 저장해주는 함수입
그걸 destructuring 문법을 이용해서 따로따로 변수로 빼서 저장합니다.

❗  id라는 변수는 :id 자리에 있던 숫자