React Router(리액트 라우터) 사용하기

리액트 라우터를 사용하여 페이지이동을 하려한다.

 

 

🕵️ 목표1. 리액트 라우터 설치 그리고 셋팅방법

🕵️ 목표2. 페이지를 이동 작성방법, 버튼 만들기

🕵️ 목표3. 라우터 6버전에서는 navigate 함수를 사용하자. 의 방법 정리

🕵️ 목표4. nested routes 사용하기

 

| 라우터 사용1.

 

라우터 라이브러리 설치

npm install react-router-dom@6

 

| 라우터 사용2.

 

 index.js 파일에 BrowserRouter로 <App />감싸기

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


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

 

 

| 라우터로 페이지 나누기

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

function App(){
  return (
    <Routes>
      <Route path="/home" element={ <HOME /> } />
      <Route path="/detail" element={ <DETAIL /> } />
    </Routes>
  )
}

<Route path="/url경로" element={ <이동할 컴포넌트 /> } />  작성하면 된다.

 

 

| 페이지 이동 버튼은 'Link to'로 

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

<Link to="/">HOME</Link>
<Link to="/detail">DETAIL</Link>

 

위처럼

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

보통 Routes와 Route 를 사용하지만

이것말고도 페이지 이동에관련된 다양하게 import할 수 있는 것들이있다. 

 

 

먼저 페이지 이동을 가능하도록하는 useNavigate()

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

페이지를 이동시켜주는 함수로,

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

navigate() 안에다가

-1 넣으면 뒤로 1번 가기

2 넣으면 앞으로 2번 가기 

 

 

| nested routes

장점1. route작성이 조금 간단해진다.

장점2.Nested route 접속시엔 element 2개나 보임

         

nested routes는 언제쓰는가? 여러 유사한 페이지가 필요할 때 사용한다.

 

App.js

<Route path="/about" element={<About/>} >
     <Route path="member" element={<div>팀원들</div>} />   {/*about/member*/}
     <Route path="location" element={<div>내위치정보</div>} /> {/*about/location*/}
</Route>

/about/member로 접속시 <About> &<div>팀원들</div> 가 보여지고,

/about/location으로 접속시 <About> & <div>내 위치 정보</div> 을 보여주게한다.

 

 

About.js (컴포넌트)

function About(){
  return (
    <div>
      <p>나의 대한 정보</p>
      <Outlet></Outlet>{/* nested routes의 element보여주는 곳<Outlet> */}
    </div>
  )
}