React Router Dom

yarn add react-router-dom

 

1. 페이지 컴포넌트 작성 -> 다중 페이지

2. Router.js 파일 생성. router를 구성하는 설정 코드 작성

3. App.jsx import 하고 2번 적용 : 주입

4. 페이지 이동

 

# Router.js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "../pages/About";
import Home from "../pages/Home";
import Works from "../pages/Works";
import Contact from "../pages/Contact";

const Router = () => {
    return (
    < BrowserRouter >
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/works" element={<Works />} />
        </Routes>
    </BrowserRouter >
    );
};

export default Router

 

# App.jsx
import './App.css';
import Router from './shared/Router';

function App() {
  return <Router />;
}

export default App;

 

 

유용한 Hook

 

1. useNavigate

다른 페이지로 보내고자 할 때 사용할 수 있다.

예를들어 버튼의 클릭 이벤트 핸들러에 아래와 같이 코드를 작성하면 버튼을 클릭했을 때 우리가 보내고자 하는 path로 

페이지를 이동시킬 수 있다.

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

const Home = () => {
	const navigate = useNavigate();
    
    return (
    	<button
        	onClick={() => {
            	navigate("/works");
            }}
        >
        	works로 이동
        </button>
    );
};

export default Home;

 

2. useLocation

 

3. Link

Link는 Hook은 아니지만, 꼭 알아야 할 API

 

Link는 html 태그중에서 a 태그의 기능을 대체하는 API. 만약 JSX에서 a 태그를 사용해야 한다면, 반드시 Link를 사용해서

구현해야 한다. 

a 태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때뮨

 

브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링 되야 하고, Redux나 useState를 통해 메모리 상에 구축해놓은

모든 상태값이 초기화 됨.

import React from 'react'
import { Link } from 'react-router-dom'

function Home() {

    return (
    <>
        <div>Home</div>

        <Link to='/works'>works 페이지로 이동하기</Link>
    </>
    )
}

export default Home

 

4. useParams

URL의 query를 알 수 있음