React router dom

Router Dom 이란?

react 상에서 여러페이지를 가진 웹을 만들 수 있게 해주는 패키지

 

Router Dom 사용법

각각 만들고자 하는 페이지 컴포넌트를 만들고  router.js 에 import해와서 <BrowserRouter> 안에 <Routes> 안에 <Route>형태로 사용한다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Works from "../pages/Works";
import Contact from "../pages/Contact";
const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="Contact" element={<Contact/>}/>
                <Route path="Works" element={<Works/>}/>
                <Route path="About" element={<About/>}/>
            </Routes>
        </BrowserRouter>
    )

}
export default Router ;

 

그리고 App 컴포넌트에 import 해준다.

import Router from './shared/Router';

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

React router dom Hooks

useNavigate

- 페이지를 옮기는 훅

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

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

    </div>
  )
}

export default Home

Home에서 Works로 옮길 때  useNavigate를 만들어준 뒤 이벤트에서 Works의 path를 입력해주면 된다. 

useLocation

const location = useLocation();

콘솔로 찍어보면 현재위치를 알려줌 

조건부렌더링에 쓰일 수 있음.

 

---

hook은 아니지만 많이 쓰이는 API

LInk

navigate와 같이 페이지를 이동시키지만 a 태그르 기반으로 하기때문에 조금 다르다..(?)

<Link to={"/Contact"}>contact로 이동</Link>

 

---

 

dynamic route

- route path에 유동적인 값을 넣어서 특정페이지로 이동하게끔 구현하는 방법

예제로 todo를 든다면 우선 데이터를 share파일에 추가해서 import해오는 방식으로 하고

export const data =[
    {
      id :1,
      todo :"리액트배우기"
    },
    {
      id :2,
      todo :"파이썬배우기"
    },
    {
      id :3,
      todo :"스프링배우기"
    },
    {
      id :4,
      todo :"노드배우기"
    },
    {
      id :5,
      todo :"유니티배우기"
    },
  ]

Work 컴포넌트를 생성해준 뒤 Works컴포넌트에 data를 map해서 풀어주고

function Works() {
  

  return (
    <div>Works
      <h3>할일목록</h3>
      {data.map((item)=>{
        return (
        <div key={item.id}>
          <Link to={`/Works/${item.id}`}>{item.id}{item.todo}</Link>
        </div>
        )
      })}
    </div>
  )
}

map안에 들어가는 형태는 button으로 navigate를 두든 Link를 하든 페이지 이동 요소를 넣어주고 Router.js에 가서 route 추가해주기

 <Route path="Works/:id" element={<Work/>}/>

 이때 path = "Works/:id" 에서 :id는 useParams에서 조회할 수 있는 값이 됩니다. 이게 동적인 값을 받는다는 의미입니다.

이제 Work으로 돌아가 useParams를 이용해 params를 받고  Works에서 누른 값에 맡는 페이지로 이동할 수 있도록 해야합니다.

function Work() {
    const params = useParams(); 
    const foundData =data.find((item)=>{
        return item.id === parseInt(params.id)
    });  //해당 id에 맞는 객체만 
    console.log(foundData)
  return (
    <div>
        <h3>할 일 :{foundData.todo}</h3>
    </div>
  )
}

이렇게 하면  각 데이터를 눌렀을 때 해당 값만 보이는 페이지가 만들어집니다.