반응 버튼 onClick으로 페이지 리디렉션
react-router-dom 기능 덕분에 웹 개발자는 다중 페이지 앱을 만들 때 다른 페이지로 이동할 수 있는 단일 페이지 앱을 쉽게 만들 수 있습니다. 하지만 react-router-dom 기능과 함께 onClick 기능을 사용하려고 하면 어떻게 될까요?
onClick 기능이 수행하는 작업
onClick 기능은 이벤트 리스너입니다. 해당 기능은 해당 요소(링크 또는 버튼)를 클릭할 때 onClick 기능이 활성화되고 설계 또는 프로그래밍된 기능을 수행하도록 요소에 프로그래밍됩니다.
예를 들어 링크를 클릭하면 링크가 다른 페이지로 이동하거나 팝업 메시지가 표시되기를 원합니다. 이것이 onClick 이벤트가 수행하는 기능입니다.
onClick과 React-Router-Dom을 결합하는 방법
React에서 다른 페이지로 리디렉션하는 일반적인 방법은 react-router-dom 패키지를 사용하는 것입니다. 그런 다음 Route exact path 및 Link 기능을 적용하여 코딩 프로세스를 완료합니다.
react-router-dom 패키지와 함께 onClick 이벤트 리스너를 사용하려고 할 때 프로세스는 대부분 위의 설명과 유사합니다.
리디렉션할 다른 페이지를 만들어야 합니다. 차이점은 주로 코딩에 있으며 onClick은 무엇보다도 팝업 메시지 생성에 더 도움이 되는 기능인 이벤트 리스너입니다.
페이지를 리디렉션하는 반응 버튼 onClick
모든 React 프로젝트를 시작하려면 다음 코드를 터미널에 넣어 새로운 React 앱을 생성합니다. npx create-react-app examplefive. 프로젝트 앱이 생성되면 npm i react-router-dom을 사용하여 react-router-dom 패키지를 설치해야 합니다.
다음으로 텍스트 편집기에서 프로젝트 폴더를 열고 리디렉션할 페이지 역할을 할 두 개의 파일을 더 만듭니다. examplefive 프로젝트 폴더의 src 폴더로 이동하여 Home.js와 Contact.js라는 두 개의 파일을 더 만듭니다.
그런 다음 아래와 같이 App.js부터 시작하여 적절한 코딩을 진행합니다.
코딩 스니펫 App.js:
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Contact from "./Contact";
const App = () => {
return (
<div style={styles.app}>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
</div>
);
};
export default App;
const styles = {
app: {
padding: 50,
},
};
여기에서 버튼을 클릭한 후 탐색하려는 페이지를 나타내는 코드 스니펫을 추가합니다.
그런 다음 Home.js로 이동하여 더 많은 코딩을 수행합니다.
코드 스니펫 Home.js:
import React from "react";
import { useNavigate } from "react-router-dom";
const Home = (props) => {
const navigate = useNavigate();
return (
<>
<h1>Home Page</h1>
<p>Go to the contact page by using one of the following:</p>
<hr />
{/* Button */}
<p>
<button onClick={() => navigate("/contact")}>Go to Contact</button>
</p>
{/* Checkbox */}
<p>
<input
type="checkbox"
onChange={() => navigate("/contact")}
></input>
<span>Check this checkbox to go to the contact page</span>
</p>
{/* Text field */}
<p>
<input
type="text"
onChange={(e) => {
if (e.target.value === "contact") {
navigate("/contact");
}
}}
placeholder="Enter 'contact' to navigate"
></input>
</p>
</>
);
};
export default Home;
메인 페이지인 Home.js에는 대부분의 콘텐츠와 코딩이 있습니다. onClick 이벤트 리스너가 contact 버튼에 연결되어 클릭하면 연락처 페이지로 이동하는 것을 볼 수 있습니다.
코드 스니펫 Contact.js:
import React from "react";
import { useNavigate } from "react-router-dom";
const Contact = (props) => {
const navigate = useNavigate();
return (
<>
<h1>Contact Page</h1>
<br />
<button onClick={() => navigate(-1)}>Go Back</button>
</>
);
};
export default Contact;
Home.js 파일과 마찬가지로 onClick 이벤트 리스너를 돌아가기 버튼에 연결합니다. 이 버튼을 클릭하면 홈페이지로 돌아갑니다.
출력:
결론
onClick 이벤트 리스너는 react-router-dom 메소드와 같은 다중 페이지 애플리케이션을 생성하기 위해 개발할 수 있는 또 다른 솔루션입니다. 그러나 react-router-dom 패키지를 사용하지 않고 다른 페이지로 리디렉션하는 알려진 방법은 없습니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn