React Router 원사와 관련된 주요 문제는 올바르게 구성하기 어려울 수 있다는 것입니다. 많은 설정과 구성이 필요하며 잘못 수행하면 예기치 않은 동작이나 오류가 발생할 수 있습니다. 또한 React Router 원사에 대한 문서가 항상 명확하거나 최신 상태가 아니므로 개발자가 문제를 해결하기 어렵습니다.
add react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
1. 이 줄은 react-router-dom 라이브러리에서 BrowserRouter, Route 및 Link 구성 요소를 가져옵니다.
"react-router-dom"에서 { BrowserRouter as Router, Route, Link } 가져오기;
2. 이 줄은 라우팅 기능을 제공하기 위해 전체 애플리케이션을 라우터 구성 요소로 래핑합니다.
3. 이 div 요소에는 서로 다른 경로 사이를 탐색하는 데 사용되는 링크 목록이 포함되어 있습니다.
- 홈
- 소개
- 이상의 주제
4. 이 hr 요소는 내비게이션 링크와 경로 콘텐츠 간의 시각적 구분 기호로 사용됩니다.
5. 이 줄은 React Router의 Route 구성 요소를 사용하여 애플리케이션에 대한 세 가지 다른 경로를 정의합니다.
6. 마지막으로 이 닫는 div 태그는 애플리케이션 래퍼 div 요소를 닫습니다.
반응 라우터는 무엇입니까
React Router는 개발자가 React 애플리케이션 내에서 경로를 생성하고 관리할 수 있게 해주는 React용 라우팅 라이브러리입니다. 경로를 구성 요소에 선언적으로 매핑하고, URL 매개 변수를 처리하고, 탐색 이벤트를 관리하는 방법을 제공합니다. 또한 동적 경로 매칭, 위치 전환 처리, 스크롤 복원과 같은 기능을 제공합니다.
원사란?
Yarn은 개발자가 보다 효율적이고 안전한 방식으로 종속성을 관리할 수 있도록 도와주는 JavaScript용 패키지 관리자입니다. React Router에서 패키지를 설치, 업데이트 및 구성하는 데 사용됩니다. 또한 Yarn은 개발자가 프로젝트의 종속성을 추적하여 필요한 모든 패키지가 설치되고 최신 상태인지 확인하는 데 도움이 됩니다. 이를 통해 각 개발자가 사용해야 하는 패키지 버전을 쉽게 확인할 수 있으므로 여러 개발자와 함께 프로젝트 작업을 더 쉽게 수행할 수 있습니다.
