16일차 (React Router Dom)

React Router Dom

1. 페이지 컴포넌트 작성

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

3. App.jsx 파일에 import 하고 적용

 

 

React Router Dom 기본구성

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="works" element={<Works />} />
        <Route path="works/:id" element={<Work />} />
      </Routes>
    </BrowserRouter>
  );
};

 

 

React-router-dom Hooks

1. useNavigate: 다른 페이지로 보내고자 할 때 사용(페이지 이동) = <a/>와 유사

2. useLocation: 위치정보 파악 => const location = useLocation();

3. Link: <a/>와 대치되는 기능

4. useParams: id값을 넘겨 세부페이지를 보여주는 기능

5. Children의 용도: Layout 사용할 때 headter과 footer를 고정하고 중간 내용만 렌더링하고싶을 때 사용

 

 

useNavigate

function Home() {
  // navigate 변수 설정
  const navigate = useNavigate();
  
  return (
    <div>
      Home <br />
      <button
        onClick={() => {
          // 동작수행시 이동하고 싶은 페이지 경로 넣으면 끝
          navigate("/works");
        }}
      >
        move Works
      </button>
    </div>
  );
}

 

 

Link

// a 태그와 같으며, to="" 부분에 가고싶은 경로를 입력해주면 끝
<Link to="/contact">move to contacts</Link>

 

 

useParams

// 기본적으로 Router.js 파일 경로에서 /:id 값을 뒤에 주어 해당하는 id를 가진 페이지로 이동할 수 있도록 설정
<Route path="works/:id" element={<Work />} />

 

그리고 만약 works 페이지에서 특정 work 페이지로 이동하고 싶을 경우, map 함수를 사용해서 페이지로 이동할 수 있는 태그들을 생성해야 함. 

// data는 data.js를 import 하여 사용
{data.map((item) => {
        return (
          <div key={item.id}>
            {item.id},<Link to={`/works/${item.id}`}>{item.todo}</Link>
          </div>
        );
      })}

 

마지막으로 work.jsx 파일에서 useParams를 사용하여 data의 id와 parms의 아이디가 같은 경우를 return 하면 끝

function Work() {
  const params = useParams();

  // 어떤 todo인지 찾아보기
  const foundData = data.find((item) => {
    return item.id === parseInt(params.id);
  });

  return (
    <div>
      <h3>{foundData.todo}</h3>
    </div>
  );
}