Router-dom

리액트 라우터

주소를 감지하고 여려 환경에서 여러 라우터가 동작하도록 한다.
오늘 주로 다룰 것은 BrowserRouter이다.

npm install react-router-dom@6

-> 리액트 라우터를 사용하기 전에 터미널에서 router dom을 설치해야 한다.

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

function App() {
  return (
    <BrowserRouter> 
      <div className="App">
      
      </div>
    </BrowserRouter>
  );
};

먼저 BrowserRouters를 임포트하고 App안의 리턴값을 BrowserRouter를 상위태그로 하여 묶는다. 이렇게 감싼 부분은 브라우저의 url과 매핑될 수 있다.

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

function App() {
  return (
    <BrowserRouter> 
      <div className="App">
        <Routes>
            <Route path='/' element={<New/>}/>
        </Routes>
      </div> 
    </BrowserRouter> 
  );
};

페이지가 바뀌는 부분은 routes 태그로 묶는다. route 태그는 url경로와 컴포넌트를 매핑한다.

Routes 태그 밖에 다른 요소를 추가하면 그 요소는 고정되고 route된 부분들만 바뀌게 할 수 있다.

useNavigator로 다른 페이지로 이동시키기

import { useNavigate } from "react-router-dom";
import MyButton from "./MyButton";

const DiaryItem = ({id, emotion, content, date})=>{

    const navigate = useNavigate();

    const goDetail = ()=>{
        navigate(`/diary/${id}`)
    }
    
    const strDate = new Date(parseInt(date)).toLocaleDateString();

    return (
        <div className="DiaryItem">
            <div onClick={goDetail}
                className={["emotion_img_wrapper", `emotion_img_wrapper_${emotion}`].join(" ")}>
                <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`}></img>
            </div>
            <div onClick={goDetail} className="info_wrapper">
                <div className="diary_date">{strDate}</div>
                <div className="diary_content_preview">
                    {content.slice(0,25)}
                </div>
            </div>
            <div className="btn_wrapper">
                <MyButton text={"수정하기"}/>
            </div>
        </div>
    );
};

export default DiaryItem;

-> react-router-dom에서 useNavigator를 임포트해준다.
그리고 navigator변수에 useNavigator()를 할당한 다음 다른 경로로 이동시키는 goDetail 함수를 만든다. 밑의 div태그에 onClick 이벤트로 goDetail함수를 설정해주면 div 박스 클릭 시 설정한 경로로 이동하는 것을 볼 수 있다.

이동 전

이동 후