React 페이지 이동

리액트에서 클릭했을 때 페이지가 이동되는 기능을 라우트로 구현해보자

Main.jsx 파일에서 -> Page1.jsx 파일로 이동한다고 가정,

그 전에 App.js에서

import Main from './components/Main';
import Page1 from './components/Page1';

<Route path="/Main" element={<Main />} />
<Route path="/Page1" element={<Page1 />} />

이렇게 라우트 경로를 지정해주고,

Main.jsx에서는

import React from "react";
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';

const Text = styled.div`
  color: #000;
  font-family: 'Pretendard';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 18px */
  cursor: pointer;
`;

export default function Main() {
	{/* navigate 함수 만들기 */}
	const navigate = useNavigate();
  	const navigateToPage1 = () => {
      navigate("/Page1");
  	};
    
    return (
       <Text onClick={navigateToPage1}>
         페이지1로 가려면 여길 누르세요
       </Text>
  	)
  
 }

이렇게 하면 끝!

---

가끔 useNavigate를 쓰다보면 아래와 같은 오류가 날 때가 있는데,

React Hook "useNavigate" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? react-hooks/rules-of-hooks

보통 const 문장이 if문보다 아래에 있어서 그런 경우가 많다.
const 문장을 if문 위로 올려주면 됨.

const navigate = useNavigate();
  
const navigateToHome = () => {
  navigate("/");
};

if (!isOpen) {
  return null;
}