React에서 다른 웹 페이지로 이동하는 방법에 대한 질문입니다.

Question

react에서 useNavigate를 사용해서 페이지를 이동하거나 이전 페이지로 이동하는 등의 작동이 가능하다고 알고 있습니다.개인 포트폴리오 용으로 사이트를 만드는데 다른 웹 페이지로 이동할 필요성이 있어서 useNavigate를 사용해 코드를 작성 하였는데const navigate &#61; useNavigate() const onClickNaver &#61; () &#61;> { navigate(&#34;naver.com&#34;) }위와 같이 네이버로 이동하고 싶을때 코드를 작성하였는데 &#34;localhost:3000/naver.com&#34; 같이 현재 페이지에 경로가 추가되는 방식으로 페이지가 변경되었습니다.jsx의 Link 태그를 사용하면 네이버로 이동하는 것이 가능했는데 jsx 말고 javascript 코드로 이동하도록 변경하고 싶습니다.useNavigate로는 불가능할까요?

옥다방고양이 · Answer

✅️useNavigate()를 사용하여 naver.com과 같은 외부 웹사이트로 직접 이동할 수는 없습니다.useNavigate()는 React 라우터를 사용하여 React 애플리케이션 내에서 탐색하기 위해 설계되었습니다.외부 웹사이트로 리디렉션하려면 window.location.href 프로퍼티를 사용해야 합니다.샘플코드입니다:●●●●●●●●●●●●●●●import React from 'react';const MyComponent = () => {const redirectToNaver = () => {// Redirect to Naver when the button is clickedwindow.location.href = 'https://www.naver.com';};return (

Hello, React!

);};export default MyComponent;

아리까리 · Answer

이런거 하나 간단하게 만들어서 쓰심 되지 않을까 싶습니다.import * as React from 'react'const useExtenalNavigate = (url: string) => { const navigate = React.useCallback(() => { if ( typeof document !== 'undefined' ) { // 새창에서 띄우려면 window.open을 쓰면 될것 같습니다. window.location.href = url } }, []) return navigate}

React에서 다른 웹 페이지로 이동하는 방법에 대한 질문입니다.

2개의 답변

Q&A 목록