[React] 라우터 설치 및 사용법

오늘은 React 라우터 설치 및 사용법에 대하여 포스팅하겠습니다.

컴포넌트를 생성할 때 너무 길어진 코드들을 App.js(메인)에 담을 경우 가독성이 떨어질 수 있습니다.

그럴경우 다른 js 파일에서 컴포넌트를 생성한 후 import 해와서 라우터에 담아서 보여줄 수 있습니다.
#일반적인 웹개발(html,js,css)과 다르게 React는 하나의 html 파일을 이용함#

1) 라이브러리 설치
터미널을 열고 npm install react-router-dom@6 실행(라이브러리 설치)

2) 셋팅
index.js 파일로 이동

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <BrowserRouter>

      <App />

    </BrowserRouter>

  </React.StrictMode>

);

<BrouserRouter>태그 안에 <App> 태그를 넣으면 셋팅완료

App.js

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

3) 사용
1. App.js 내에 갈아치우고 싶은 <div> 영역에 <Routes>태그 생성후 <Route>태그를 생성
<Routes>
  <Route path="/detail" element={ <div>상세페이지</div> } />
  <Route path="/about" element={ <div>어바웃페이지</div> } />
</Routes>
2. path에 메인url 뒤에 붙을 경로를 설정
   path="/" -> / 하나는 메인페이지 임
3. element에 보여질html 
ex) 

/detail의 내용이 잘 나옵니다 ~

4) 라우터에 파라미터 붙히기
파라미터로 값을 전달 할 경우 -> :파라미터 를 path에 경로 뒤에 붙히면 /detail로 접속했을 경우 , id라는 파라미터를 
보내줍니다. 

App.js

import Detail1 from './routes/Detail.js';//Detail.js에서 import 해온 데이터

<Route path='/detail/:id' element={

          <><br/><br/><br/><Detail1 satur={ satur }/></> } />

ex) 파라미터가 0일 경우 : 메인url/detail/0
<Detail1>컴포넌트가 생성

Detail.js

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

Detail.js 에서 App.js에서 보낸 파라미터를 받기 위해 useParams를 import 해줍니다.

let {id} = useParams();

  console.log('id1 --> '+id);

console에 App.js에서 보낸 파라미터가 잘 출력됩니다

파라미터를 이용하여 state에 배열의 시퀀스 값을 설정할 수 있겠습니다
ex) 1로 파라미터를 설정하여 보낼 경우 , state 배열의 [1] 번째 데이터 출력



* path에 * 표시를 넣으면 사용자가 메인url 뒤에 잘못쳐서 접속하는 경우에 대비할 수 있습니다.(404Error)

let msg404 = '없는 페이지입니다. URL을 다시 확인해주세요!';

<Route path='*' element={ <div><br/><br/><br/>{ msg404 }</div> }/>

*

자주 바뀌는 html 부분에 유용하게 사용가능
ex) 페이지의 nav바를 제외하고 나머지 부분은 유동적으로 변경 되기 때문에 라우터로 url 마다 변경 가능하도록 설정

---

[navigate , Outlet 사용하기]
1) navigate

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

상단 import 부분에서 useNavigate, Outlet을 추가해줍니다.

let navigate = useNavigate();//페이지 이동을 도와주는 함수

useNavigate 함수를 변수에 담습니다.

<Nav.Link onClick={ ()=> { navigate('/')} }>Home</Nav.Link>

<Nav.Link onClick={ ()=>{ navigate('/detail')} }>Detail</Nav.Link>

navigate() 안에 / 하나를 넣으면 현재 페이지 , /뒤에 경로를 넣으면 그 경로로 이동시켜줍니다.
또한 정수를 넣으면 그 정수만큼 앞으로 페이지 이동 , 음수를 넣으면 그만큼 뒤로 페이지 이동

2) Nested routes, Outlet
<Route>안에 <Route>를 넣는 방법을 Nested routes라고 부릅니다.

<Route path='/event' element={ <Event/> }>

    <Route path='one' element={

        <>첫 주문시 벨트 서비스</> }/>

    <Route path='two' element={

        <>생일 기념 쿠폰 받기</> }/>

</Route>

/event path 안에 one ,two의 경로가 있습니다.
-> 메인url/event/one , 메인url/event/two
/event가 중복 ( <Evenet/> 컴포넌트가 중복됨 )  되기 때문에 <Route> 안에 넣어서 생성합니다.

function Event() {

  return(

    <div><br/><br/><br/>

      <h4>오늘의 이벤트</h4>

      <Outlet></Outlet>{/* <Outlet>태그는 nested Route를 사용할 때 하위에 있는 링크의 데이터를 보여줄 위치를 지정하는 태그임 */}

    </div>

  )

}

위의 Event 컴포넌트를 보면 오늘의 이벤트라는 텍스트가 있습니다.

메인url/event

메인url/event 로 접속하면 저 부분만 출력되고 , 메인url/event/one 으로 접속하면 <Event> 컴포넌트의 내용 오늘의 이벤트 밑에 Nested route 로 설정해둔 멘트가 출력됩니다.

메인url/event/one

유사한 서브페이지를 만들 때 유용하게 사용할 수 있겠습니다 !