React Router는 React에서 라우팅을 위한 표준 라이브러리입니다. React 애플리케이션의 다양한 구성요소 보기 간 탐색을 가능하게 하고, 브라우저 URL을 변경할 수 있으며, UI를 URL과 동기화된 상태로 유지합니다.
React Router의 작동 방식을 이해하기 위해 간단한 React용 애플리케이션을 만들어 보겠습니다. 애플리케이션에는 홈, 정보 및 연락처 구성 요소가 포함됩니다. 우리는 React Router를 사용하여 이러한 구성 요소 사이를 탐색할 것입니다.
npx 생성-반응-앱
개발 환경이 준비되었습니다. 이제 애플리케이션에 React Router를 설치해 보겠습니다.
반응 라우터 : React Router는 npm을 통해 React 애플리케이션에 설치할 수 있습니다. React 애플리케이션에서 라우터를 설정하려면 아래 단계를 따르세요.
1단계: 프로젝트 디렉토리에 있는 CD, 즉 ., 자바.
2단계: 다음 명령을 사용하여 React Router를 설치합니다.
npm install - -react-router-dom 저장
React-router-dom을 설치한 후 해당 구성 요소를 React 애플리케이션에 추가하세요.
React Router 구성요소 추가:
React Router의 주요 구성요소는 다음과 같습니다.
순서대로 이동하는 대신 가장 일치하는 경로를 기준으로 경로가 선택됩니다.
애플리케이션에 React Router 구성 요소를 추가하려면 사용하는 편집기에서 프로젝트 디렉터리를 열고 app.js 파일로 이동하세요. 이제 app.js에 아래 코드를 추가하세요.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; 참고: BrowserRouter는 Router로 별칭이 지정됩니다.
React Router 사용: React Router를 사용하기 위해 먼저 React 애플리케이션에서 몇 가지 구성 요소를 만들어 보겠습니다. 프로젝트 디렉터리에서 src 폴더 안에 구성 요소라는 폴더를 만들고 이제 구성 요소 폴더에 home.js, about.js 및 contact.js라는 3개의 파일을 추가합니다.
3가지 구성 요소에 몇 가지 코드를 추가해 보겠습니다.
자바 코어 자바
Home.js:
import React from 'react'; function Home (){ return } export default Home; About.js:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contact.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; 이제 애플리케이션에 React Router 구성 요소를 포함해 보겠습니다.
브라우저라우터 : 별칭이 지정된 BrowserRouter를 app.js 파일에 라우터로 추가하여 다른 모든 구성 요소를 래핑합니다. BrowserRouter는 상위 구성 요소이며 하위 구성 요소를 하나만 가질 수 있습니다.
class App extends Component { render() { return ( ); } } 연결: 이제 구성 요소의 링크를 만들어 보겠습니다. Link 구성 요소는 props를 사용하여 링크가 탐색해야 하는 위치를 설명합니다.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
이제 로컬 호스트에서 애플리케이션을 실행하고 생성된 링크를 클릭하세요. 링크 구성 요소의 값에 따라 URL이 변경되는 것을 확인할 수 있습니다.
노선 : 경로 구성 요소는 구성 요소의 UI와 URL 간의 링크를 설정하는 데 도움이 됩니다. 애플리케이션에 경로를 포함하려면 app.js에 아래 코드를 추가하세요.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> 이제 구성 요소가 연결되었으며 링크를 클릭하면 해당 구성 요소가 렌더링됩니다. 이제 루트 구성 요소와 관련된 props를 이해해 보겠습니다.
- 요소는 경로가 일치하는 경우 렌더링되는 구성 요소를 나타냅니다.
참고: 기본적으로 경로는 포괄적입니다. 즉, 둘 이상의 경로 구성 요소가 URL 경로와 일치하고 동시에 렌더링될 수 있음을 의미합니다. 단일 구성 요소를 렌더링하려면 여기에서 경로를 사용해야 합니다.
노선 : 단일 구성 요소를 읽으려면 Routes 구성 요소 내부에 모든 경로를 래핑합니다.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> 여러 경로에 걸쳐 그룹을 전환하고 반복하여 경로와 일치하는 첫 번째 그룹을 찾습니다. 따라서 경로의 해당 구성 요소가 렌더링됩니다.
모든 구성 요소를 추가한 후의 전체 소스 코드는 다음과 같습니다.
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> 이제 링크를 클릭하고 다양한 구성 요소를 탐색할 수 있습니다. React Router는 애플리케이션 UI를 URL과 동기화된 상태로 유지합니다.
마지막으로 React Router를 사용하여 React 애플리케이션에서 탐색을 성공적으로 구현했습니다.
UI와 URL의 동기화를 유지하기 위해 HTML5 기록 API(pushstate, replacementstate 및 popstate 이벤트)를 사용하는 A입니다.
기본 이름: 문자열
모든 위치의 기본 URL입니다. 앱이 서버의 하위 디렉터리에서 제공되는 경우 해당 하위 디렉터리로 설정하는 것이 좋습니다. 올바른 형식의 기본 이름에는 앞에는 슬래시가 있어야 하지만 뒤에는 슬래시가 없어야 합니다.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
내비게이션을 확인하는 데 사용하는 기능입니다. 기본값은 window.confirm을 사용하는 것입니다.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: 부울
true인 경우 라우터는 페이지 탐색 시 전체 페이지 새로 고침을 사용합니다. 이를 사용하여 기존 서버 렌더링 앱이 페이지 탐색 간 전체 페이지 새로 고침에서 작동하는 방식을 모방할 수 있습니다.
정적 자바
키길이: 숫자
위치의 길이. 열쇠. 기본값은 6입니다.
어린이: 노드- 렌더링할 하위 요소입니다.
참고: React에서는 render 메서드가 두 개 이상의 요소를 반환할 수 없으므로 단일 하위 요소를 사용해야 합니다. 두 개 이상의 요소가 필요한 경우 추가 또는 로 래핑해 볼 수 있습니다.
URL의 해시 부분(예: window.location.hash)을 사용하여 UI와 URL의 동기화를 유지하는 A입니다.
참고: 해시는 기록 위치를 지원하지 않습니다. 키 또는 위치. 상태. 이전 버전에서는 동작을 줄이려고 노력했지만 해결할 수 없는 극단적인 경우가 있었습니다. 이 동작이 필요한 코드나 플러그인은 작동하지 않습니다.
이 기술은 이전 브라우저만 지원하기 위한 것이므로 대신 작동하도록 서버를 구성하는 것이 좋습니다.
기본 이름: 문자열
모든 위치의 기본 URL입니다. 올바른 형식의 기본 이름에는 앞에는 슬래시가 있어야 하지만 뒤에는 슬래시가 없어야 합니다.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
내비게이션을 확인하는 데 사용하는 기능입니다. 기본값은 window.confirm을 사용하는 것입니다.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> 해시 유형: 문자열
사용되는 인코딩 창.위치.해시 . 사용 가능한 값은 다음과 같습니다.
타이프 스크립트 foreach
- 'slash' - #/ 및 #/sunshine/lollipops와 같은 해시를 생성합니다.
- 'noslash' - # 및 #sunshine/lollipops . 해시가 생성됨에 따라
- 'hashbang' - #!/ 및 #!/sunshine/lollipops와 같은 'ajax 크롤링 가능'(Google에서는 더 이상 사용되지 않음) 해시를 생성합니다.
기본값은 '슬래시'입니다.
어린이: 노드
렌더링할 단일 하위 요소입니다.
애플리케이션 주위에 선언적이고 접근 가능한 탐색 기능을 제공합니다.
About
받는 사람: 문자열
링크 위치의 문자열 표현은 위치의 경로 이름, 검색 및 해시 속성을 결합하여 생성됩니다.
다음 속성 중 하나를 가질 수 있는 개체입니다.
받는 사람: 기능
현재 위치가 인수로 전달되고 위치 표현을 문자열이나 객체로 반환해야 하는 함수입니다.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> 교체: 부울
true인 경우 링크를 클릭하면 새 항목을 추가하는 대신 현재 항목이 대체됩니다.
entry to the history stack.
내부 참조: func
React Router 5.1부터 React 16을 사용하는 경우 참조를 기본으로 전달하므로 이 prop이 필요하지 않습니다. . 대신 일반 참조를 사용하세요.
구성요소의 내장 참조에 대한 액세스를 허용합니다.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
React Router 5.1부터 React 16을 사용하는 경우 참조를 기본으로 전달하므로 이 prop이 필요하지 않습니다. . 대신 일반 참조를 사용하세요.
React.createRef를 사용하여 구성 요소의 기본 참조를 가져옵니다.
let anchorRef = React.createRef()
구성요소: React.Component
자체 탐색 구성 요소를 활용하려면 구성 요소 소품을 통해 전달하면 됩니다.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> 당신이 원하는 소품을 전달할 수도 있습니다 제목, ID, 클래스 이름 등과 같은
이 특수 버전은 기존 URL과 일치하는 경우 렌더링된 요소에 스타일 속성을 추가합니다.
About
클래스명: 문자열 | 기능
className은 문자열이거나 문자열을 반환하는 함수일 수 있습니다. className 함수를 사용하면 링크의 활성 상태가 매개변수로 전달됩니다. 이는 비활성 링크에만 className을 적용하려는 경우에 유용합니다.
fcfs
'nav-link' + (!isActive ? ' unselected' : '') } >
자주 묻는 질문
React Router v6에서는 activeClassName이 제거되며 className 함수를 사용하여 활성 또는 비활성 NavLink 구성 요소에 클래스 이름을 적용해야 합니다.
활성 클래스 이름: 문자열
활성 상태일 때 요소를 제공하는 클래스입니다. 기본적으로 지정된 클래스는 활성 상태입니다. classname 소품과 결합됩니다.
스타일: 개체 | 기능
스타일은 React.CSSProperties 객체이거나 스타일 객체를 반환하는 함수일 수 있습니다. 함수 스타일을 사용하는 경우 링크의 활성 상태가 매개변수로 전달됩니다.
({ color: isActive ? 'green' : 'blue' })} > React Router v6에서는 활성 스타일이 제거되며 활성 또는 비활성 NavLink 구성 요소에 인라인 스타일을 적용하려면 함수 스타일을 사용해야 합니다.
활성 스타일: 객체
활성 상태일 때 요소에 적용되는 스타일입니다.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> 엄격한: 부울
true인 경우 위치가 현재 URL과 일치하는지 여부를 결정할 때 위치 경로 이름의 후행 슬래시가 고려됩니다. 자세한 내용은 설명서를 참조하세요.
Events
isActive: 기능
링크가 활성화되었는지 확인하기 위해 추가 논리를 추가하는 기능입니다. 이는 링크의 경로 이름이 현재 URL의 경로 이름과 일치하는지 확인하는 것 이상의 작업을 수행하려는 경우에 사용해야 합니다.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 위치: 개체
isActive 현재 기록 위치(일반적으로 현재 브라우저 URL)와 비교합니다.
아리아-현재: 문자열
활성 링크에 사용되는 면적 전류 속성의 값입니다. 사용 가능한 값은 다음과 같습니다.
- '페이지' - 페이지 매기기 링크 집합 내의 링크를 나타내는 데 사용됩니다.
- '단계' - 단계 기반 프로세스의 단계 표시기 내 링크를 나타내는 데 사용됩니다.
- '위치' - 순서도의 현재 구성 요소로 시각적으로 강조 표시된 이미지를 나타내는 데 사용됩니다.
- '날짜' - 달력 내에서 현재 날짜를 나타내는 데 사용됩니다.
- 'time' - 타임테이블 내에서 현재 시간을 나타내는 데 사용됩니다.
- 'true' - NavLink가 활성화되어 있는지 여부를 나타내는 데 사용됩니다.
- 'false' - 보조 기술이 현재 링크에 반응하는 것을 방지하는 데 사용됩니다(한 가지 사용 사례는 페이지의 여러 영역 현재 태그를 방지하는 것입니다).