라우팅 (셋팅, navigate, nested routes, outlet)

react-router-dom 라이브러리 설치

터미널에 다음 명령어 입력

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>
); 

▲ import 어쩌구 해오고 <BrowserRouter> 이걸로 <App/> 이걸 감싸면 끝

 

 

라우팅 사용법

- App.js

import './App.css';
import {Routes, Route, Link} from 'react-router-dom';

function App() {
  let [shoes] = useState(data);
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<div>메인페이지</div>}/>
        <Route path="/detail" element={<div>상세페이지</div>}/>
        <Route path="/cart" element={<div>장바구니 페이지</div>}/>
      </Routes>
    </div>
  );
}

export default App;

 

 

버튼 눌렀을 때 페이지 이동하기

<Link to='/detail'></Link>

import './App.css';
import {Routes, Route, Link} from 'react-router-dom';

function App() {
  let [shoes] = useState(data);
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<div>메인페이지</div>}/>
        <Route path="/detail" element={<div>상세페이지</div>}/>
        <Route path="/cart" element={<div>장바구니 페이지</div>}/>
      </Routes>
      
      <Link to="/">홈</Link>    //홈으로 가는 버튼
      <Link to="/detail">상세페이지</Link>    //상세페이지로 가는 버튼
    </div>
  );
}

export default App;

 

useNavigate() 함수

useNavigate()함수는 <Link>태그와 같이 페이지 이동을 도와준다.

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

 

nested routes

<Route>안에 <Route>를 넣을 수 있는데 이걸 Nested routes 라고 부른다.

여러 페이지가 필요하고, 그 페이지들 간의 차이점이 별로 없을 때 사용하면 좋다. 

(일반적인 방식)
<Route path="/about" element={<About></About>}/>
<Route path="/about/member" element={<About></About>}/>

(nested routes 방식)
<Route path="/about" element={<About></About>}>
  <Route path="member" element={<About></About>}/>
</Route>

장점 1) route 작성이 간단해질 수 있다.

장점 2) nested route 접속시엔 element 2개가 보인다. => 보여질 위치를 지정해야 element 2개가 다 보인다.

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

function App() {
  return (
    <div className="App">
      <Routes>
      	//nested routes
        <Route path="/about" element={<About></About>}>
          <Route path="member" element={<div>member정보</div>}/>
        </Route>
      </Routes>
    </div>
  );
}

function About() {
  return (
    <div>
      <h4>회사정보</h4>
      <Outlet></Outlet>	 	//outlet태그로 보여질 위치 지정
    </div>
  )
}

export default App;