React - 리액트 라우터 v6 설치, 사용(useNavigate, nested routes, useParams까지)

리액트에서 페이지를 나누고 싶을 때 react-router-dom 이라는 외부 라이브러리를 설치해서 구현해보자.

 

터미널 오픈 후 

npm install reat-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 컴포넌트를 BrowserRouter로 감싸준다.

 

 

이제 라우터로 url 경로마다 다른 페이지를 보여주고 싶을 때

(App.js)

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

function App(){
	return(
    	//생략
        <Routes>
        	<Route path="/about" element={<div>보여줄 내용</div>} />
        	<Route path="/detail" element={<div>보여줄 내용</div>} />
        <Routes>
    )
}

상단에 필요한 컴포넌트를 import 해오고 Routes안에 Route를 작성한다.

<Route path="/url경로" element={ 보여줄 html } />

path="/" 이경로는 메인페이지이다. 이제 경로마다 보여지는 컨텐츠 분리 가능!

 

 

이제 유저들이 페이지를 이동할 때 누를 링크작업

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

각각 url 경로로 이동하는 링크를 생성할 수 있다. 근데 못생김

 

 

링크 대신 페이지 이동기능을 만들고 싶으면 useNavigate() 를 쓰자.

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


function App(){

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

navigate('/detail') 이런 코드가 실행되면 /detail 페이지로 이동가능하다.

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

-1 은 뒤로 1번 가기, 2 넣으면 앞으로 2번 가기

 

 

유저가 이상한 경로로 접속했을 때 보여줄 404 페이지도 만들 수 있다.

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

* 는 모든 경로를 뜻해서 설정한 경로 외의 주소로 접속하면 뒤의 html을 보여준다.

 

 

 

/about/member로 접속하면 회사멤버 소개하는 페이지
/about/location으로 접속하면 회사위치 소개하는 페이지

등 이렇게 하위경로를 만들고 싶으면!? 

<Route path="/about" element={<About/>}>
	<Route path="member" element={<div>멤버페이지</div} />
	<Route path="location" element={<div>위치페이지</div} />
</Route>

Route안에 Route를 넣을 수 있는데 이걸 Nested routes라고 부른다. 라우터 둥지. 귀여워

문제점은 저 member에 대한 html을 상위의 About컴포넌트의 어디에 보여줄지 표기해줘야함.

 

 

그러기위해 Outlet 컴포넌트 import 후 상위 About 컴포넌트에서 위치 지정을 해줌.

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


function About(){
	return(
    	<div>
            <h4>about페이지</h4>
            <Outlet />
        </div>
    )
}

 

 

 

근데 상세페이지 여러개 만들고싶으면? 가령 detail/상품번호 이런 url처럼..

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

그럴 땐 URL 파라미터 문법을 사용한다. path경로 작명할 때 /:어쩌구 이렇게 사용하면 "아무 문자" 를 뜻함.

그래서 위의 Route는 누군가 주소창에 /detail/아무거나 입력했을 때 뒤의 element 보여주라는 뜻임.

 

 

알았는데 그럼 페이지마다 다른 내용 보여주고 싶으면요?

:아무거나 < 이걸 이용하면 좋을 것 같음. 현재 url파라미터로 넘어온 숫자나 문자.

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

function Detail(){
	let { id } = useParams();
}

 Detail컴포넌트에 가서 현재 입력된 파라미터  /:아무거나를 가져올 수 있는 useParams기능을 쓰자.

변수에 저장해서 자유자재로 사용하면 됨.

 

 

 

 

이상 리액트 라우터를 써서 동적인 UI를 만드는 방법을 알아보았따.

쉽게 뒤로가기도 구현할 수 있으니 꿀!