[React] 리액트 라우터 react-router-dom

리액트에서는 내부에 있는 <div>를 갈아치워서 다른 페이지를 보여줌.

이럴때 유용한 유용한 외부 라이브러리가 react -router-dom.

 

react-router-dom 설치

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

react-router-dom import 해오고

<BrowserRouter> 로 <App/> 감싸기.

 

router 로 페이지 나누기

somewhere.com/a 로 접속하면 a 페이지 보여주고,somewhere.com/b 로 접속하면 b 페이지 보여주고 이렇게 url 경로마다 다른 페이지 보여주고 싶다면,

(App.js)

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

function App(){
  return (

    <Routes>
      <Route path="/a" element={ <div>a페이지임</div> } />
      <Route path="/b" element={ <div>b페이지임</div> } />
    </Routes>
  )
}

1. 사용될 컴포넌트들 import 해오고

2. <Routes> 만들고 그 안에 <Route>를 작성

3. <Route path='/url경로' element={ <보여줄html> } /> 작성

 

메인페이지는 path='/' 만 기입해주면 됨.

 

페이지 이동버튼

링크를 만들고 싶으면 react-router-dom 에서 Link 컴포넌트를 import 해오고

원하는 곳에 <Link> 쓰면 됨.

<Link to='/'>메인페이지</Link>
<Link to='/a'>a페이지</Link>

 

리액트 프로젝트 폴더구조

비슷한 js 파일끼리 한 폴더에 묶어놓으면 좋은 폴더구조/

예) 컴포넌트 역할하는 js 파일은 components 폴더에, 페이지 역할하는 js 파일은 routes 아니면 pages 폴더에, 자주쓰는 함수가 들어있는 js 파일은 utils 폴더에 묶고, 필요할 때마다 폴더 만들어 쓰면 됨.

 

useNavigate() : 페이지 이동기능

Link 처럼 페이지 이동이 가능

useNavigate()를 쓰면 그 자리에 페이지 이동시켜주는 함수가 남음.

이동하길 원하는 페이지로 코드 작성하면 됨.

navigate()에 숫자 넣으면 앞으로가기, 뒤로가기 기능 개발도 가능.

예) navigate(-1) 뒤로 1번 가기, navigate(2) 앞으로 2번 가기

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

function App(){
  let navigate = useNavigate()
  
  return (
    <button onClick={()=>{ navigate('/a') }}>이동버튼</button>
  )
}

 

404 페이지

이상한 경로로 접속시 보여지는 페이지.

<Route path='*'> 모든 경로를 뜻하는 * 경로를 path에 작성해서 맨 밑에 추가해두면, 위에 만들어둔 경로들에 해당하지 않는 이상한 경로로 접속시 * 경로로 안내해줌.

 <Route path="*" element={ <div>없는페이지입니다.</div> } />

 

nested routes : 서브경로 만들기

/a/0 로 접속하면 0번째 페이지

/a/1 로 접속하면 1번째 페이지를 만들고 싶을 때 사용.

Nested routes로 <Route> 안에 <Route>를 넣으면, /a/0으로 접속시 <Apage> &  <Apage> 안에 <div>0번째 페이지</div>를 보여줌.  /a/1으로 접속시 <Apage> & <Apage> 안에 <div>1번째 페이지</div>를 보여줌.

 

<Apage> 컴포넌트 안에 <div> 를 어디다 보여줄지 표기해야 함.

<Outlet>은 nested routes안의 element 들을 어디에 보여줄지 표기하는 곳.

유사한 서브페이지들이 많이 필요할 때 유용.

<Route path="/a" element={ <Apage/> } >  
  <Route path="0" element={ <div>0번째 페이지</div> } />
  <Route path="1" element={ <div>1번째 페이지</div> } />
</Route>

function Apage(){
  return (
    <div>
      <h4>A 페이지임</h4>
      <Outlet></Outlet> // 서브경로 <div>를 보여줄곳
    </div>
  )
}

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!