React의 다른 페이지에 대한 링크

1. 반응의 링크
2. react-router-dom 패키지를 사용하여 React의 다른 페이지로 리디렉션

인터넷에서 링크를 찾을 수 있습니다. SEO에서의 중요성은 말할 것도 없고 웹 페이지, 사진 및 비디오와 같은 리소스를 발견하는 데 매우 중요합니다.

라우팅은 URL을 방문할 때 실행되어야 하는 코드를 결정합니다. 이 기사에서는 React의 라우팅 작동 방식에 대해 설명합니다.

반응의 링크

아래 그림과 같이 React와 같은 라이브러리를 사용하지 않는 일반 앱의 링크는 앵커 태그로 빌드됩니다.

<a href="https://Youtube.com">Go To Youtube</a>

이것은 React에서도 작동한다는 것을 기억하세요. 이 라우팅 전략은 새 경로에서 변경되는 유일한 것이 이미지와 일부 텍스트일 때 전체 페이지 새로 고침을 트리거합니다.

전체 페이지 새로 고침은 경우에 따라 유용하지만 거의 필요하지 않습니다.

React Router와 같은 라이브러리는 이를 사용하여 앱이 지정된 경로에 따라 다시 렌더링해야 하는 구성 요소를 렌더링할 수 있도록 합니다.

react-router-dom 패키지를 사용하여 React의 다른 페이지로 리디렉션

react-router-dom 패키지를 사용하여 ReactJS의 다른 페이지로 리디렉션하는 방법을 살펴보겠습니다. react-router-dom은 웹 페이지에서 동적 라우팅을 구성할 수 있는 reactJS 패키지입니다.

먼저 반응 앱을 만든 다음 다른 구성 요소를 추가합니다.

Home.jsx와 About.jsx라는 두 페이지를 만들었습니다.

코드 - Home.jsx:

import React from 'react';
import {Link} from 'react-router-dom';

const Home = () => {
  return (<div><h1>Home Page</h1>
      <p>You are in home Page</p><br /><ul>
          <li><Link to = '/'>Home</Link>
        </li><li>
          <Link to = '/about'>About</Link>
        </li></ul>
    </div>);
};
export default Home;

코드 - About.jsx:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is about page</p>
    </div>
  );
};

export default About;

react-router-dom 패키지를 사용하여 라우팅을 구현하십시오. 이 섹션에서는 React 앱에서 react-router-dom 패키지를 구현합니다.

이렇게 하려면 BrowserRouter,, Routes, 및 Route를 포함하여 react-router-dom 패키지에서 특정 구성 요소를 가져와야 합니다.

일을 단순하게 유지하기 위해 BrowserRouter를 Router로 별칭합니다. 그런 다음 가져온 각 구성 요소를 하나씩 살펴봅니다.

BrowserRouter는 HTML5 기록 API를 활용하여 UI를 URL과 동기화 상태로 유지합니다. Route는 해당 경로가 현재 URL과 일치할 때 UI 렌더링을 담당하고 Routes는 위치에 해당하는 첫 번째 하위 경로 또는 리디렉션을 표시합니다.

다음은 react-router-dom 패키지를 구현할 App.js 파일의 코드입니다.

코드 - App.js:

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

import About from './components/About';
import Home from './components/Home';

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path='/' element={
    <Home />} />

          <Route path="/about' element={<About />} /'
        </Routes>
      </Router>
    </>
  );
}

export default App;

우리가 React에 연결하더라도 React Router는 비밀리에 응답하도록 다시 작성하여 현재 URL이 계속 올바르게 작동하도록 합니다. 또한 전체가 더 이상 필요하지 않도록 서버 설정을 수정하면 해당 링크가 자동으로 업데이트됨을 의미합니다.

정보를 클릭하면 정보 페이지로 리디렉션됩니다.

그게 다야. 이제 React 링크의 개념과 경로를 효율적으로 관리하는 방법을 이해했다면 도움이 될 것입니다.