React Router — стандартна бібліотека для маршрутизації в React. Він забезпечує навігацію між представленнями різних компонентів програми React, дозволяє змінювати URL-адресу браузера та підтримує синхронізацію інтерфейсу користувача з URL-адресою.
Щоб зрозуміти, як працює React Router, давайте створимо просту програму для React. Додаток міститиме компоненти «дім», «Про» та «Контакт». Ми будемо використовувати React Router для навігації між цими компонентами.
npx create-react-app
Ваше середовище розробки готове. Давайте тепер встановимо React Router у нашу програму.
Маршрутизатор React : React Router можна встановити у ваш додаток React через npm. Виконайте наведені нижче кроки, щоб налаштувати маршрутизатор у своїй програмі React:
Крок 1: компакт-диск у каталозі вашого проекту, тобто ., java.
Крок 2: Використовуйте таку команду, щоб встановити React Router:
npm install - -save react-router-dom
Після встановлення react-router-dom додайте його компоненти до програми React.
Додавання компонентів маршрутизатора React:
Основними компонентами 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. У каталозі проекту створіть папку з назвою 'components' у папці 'src' і додайте 3 файли з іменами home.js, about.js і contact.js у папку 'components'.
Давайте додамо трохи коду до наших 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 : додайте псевдонім BrowserRouter як маршрутизатор до вашого файлу app.js, щоб обернути всі інші компоненти. BrowserRouter є батьківським компонентом і може мати лише одного дочірнього компонента.
class App extends Component { render() { return ( ); } } Посилання: Тепер створимо зв’язки наших компонентів. Компонент «Посилання» використовує атрибути для опису місця, до якого має вести посилання.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Тепер запустіть свою програму на локальному хості та натисніть на створене посилання. Ви помітите, що URL-адреси змінюються відповідно до значення компонента посилання.
Маршрут : Компонент маршруту допоможе нам встановити зв’язок між інтерфейсом користувача компонента та URL-адресою. Щоб включити маршрут у додаток, додайте наведений нижче код до свого app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Тепер компоненти з’єднані, і клацання будь-якого посилання відобразить відповідний компонент. Давайте тепер спробуємо зрозуміти атрибути, пов’язані з кореневим компонентом.
- Елемент посилається на компонент, який відображатиметься, якщо шлях збігається.
Примітка. За замовчуванням маршрути включені, що означає, що кілька компонентів маршруту можуть відповідати 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 підтримує синхронізацію інтерфейсу користувача програми з URL-адресою.
Нарешті, ми успішно реалізували навігацію в нашій програмі React за допомогою React Router.
A, який використовує API історії HTML5 (події pushstate, replacestate та popstate), щоб підтримувати синхронізацію вашого інтерфейсу користувача з URL-адресою.
базове ім'я: рядок
Базовий URL для всіх місць. Якщо ваша програма обслуговується з підкаталогу на вашому сервері, ви захочете встановити її в цьому підкаталозі. Правильно відформатована базова назва має містити скісну риску на початку, але не скісну риску в кінці.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: функц
Функція для підтвердження навігації. За умовчанням використовується window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Якщо встановлено значення true, маршрутизатор використовуватиме повносторінкове оновлення навігації. Можливо, ви захочете використати це, щоб імітувати, як традиційна серверна програма буде працювати з повним оновленням сторінки між навігацією по сторінках.
keyLength: число
Довжина розташування. ключ. За замовчуванням 6.
діти: вузол- дочірній елемент для візуалізації.
Примітка: у React ви повинні використовувати один дочірній елемент, оскільки метод render не може повернути більше одного елемента. Якщо вам потрібно більше одного елемента, ви можете спробувати обернути їх у додатковий або .
bash для циклу
A, який використовує хеш-частину URL-адреси (тобто window.location.hash), щоб підтримувати синхронізацію вашого інтерфейсу користувача з URL-адресою.
Примітка: хеш не підтримує місцезнаходження історії. Ключ або місцезнаходження. Держава. У попередніх версіях ми намагалися зменшити поведінку, але були крайні випадки, які ми не могли вирішити. Будь-який код або плагін, які вимагають такої поведінки, не працюватимуть.
Оскільки ця технологія призначена для підтримки лише старіших веб-переглядачів, ми рекомендуємо вам замість цього налаштувати свій сервер для роботи.
перетворити strin на int
базове ім'я: рядок
Основна URL-адреса для всіх місць. Правильно відформатована базова назва повинна мати скісну риску на початку, але не скісну риску в кінці.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: функц
Функція для підтвердження навігації. За умовчанням використовується window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: рядок
Кодування, яке використовується для window.location.hash . Доступні значення:
- 'slash' - створює хеші типу #/ і #/sunshine/lollipops
- 'noslash' - # і #sunshine/lollipops . як хеш створює
- 'hashbang' - створює хеші 'ajax crawlable' (не рекомендовані google), наприклад #!/ і #!/sunshine/lollipops
За замовчуванням 'коса лінія'.
діти: вузол
Один дочірній елемент для візуалізації.
Забезпечує декларативну доступну навігацію вашою програмою.
About
до: рядок
Рядкове представлення розташування посилання створюється шляхом поєднання імені шляху розташування, пошуку та хеш-властивостей.
Об’єкт, який може мати будь-яку з таких властивостей:
до: функц
Функція, у якій поточне розташування передається як аргумент і яка має повертати представлення розташування у вигляді рядка або об’єкта.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> замінити: bool
Якщо значення true, клацання посилання замінить поточний запис замість додавання нового
entry to the history stack.
внутрішня посилання: функ
Починаючи з React Router 5.1, якщо ви використовуєте React 16, вам не потрібен цей проп, оскільки ми пересилаємо посилання базовому . Замість цього використовуйте звичайне посилання.
Дозволяє отримати доступ до вбудованого посилання компонента.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
Починаючи з React Router 5.1, якщо ви використовуєте React 16, вам не потрібен цей проп, тому що ми пересилаємо посилання базовому . Замість цього використовуйте звичайне посилання.
Отримайте базове посилання компонента за допомогою 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> Ви також можете передати реквізит, на якому ви хотіли б бути наприклад назва, ідентифікатор, назва класу тощо.
Спеціальна версія додасть атрибути стилю до відтвореного елемента, якщо він відповідає існуючій URL-адресі.
About
className: рядок | функц
className може бути або рядком, або функцією, яка повертає рядок. Якщо використовується функція className, активний стан посилання передається як параметр. Це корисно, якщо ви хочете виключно застосувати className до неактивного посилання.
'nav-link' + (!isActive ? ' unselected' : '') } >
поширені запитання
У React Router v6 ActiveClassName буде видалено, і ви повинні використовувати функцію className, щоб застосувати назву класу до активних або неактивних компонентів NavLink.
ActiveClassName: рядок
клас для надання елементу, коли він активний. Типовий клас є активним. Він буде об’єднаний із властивістю імені класу.
стиль: об'єкт | функц
стиль може бути об’єктом 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-адресою браузера).
арія-ток: струн
Значення атрибута area-current, що використовується в активному посиланні. Доступні значення:
- 'сторінка' - використовується для позначення посилання в наборі посилань на сторінки
- «Кроки» — використовується для позначення посилання в індикаторі кроків для покрокового процесу
- 'location' - використовується для позначення зображення, яке візуально виділено як поточний компонент блок-схеми
- 'дата' - використовується для позначення поточної дати в календарі
- 'time' - використовується для вказівки поточного часу в розкладі
- 'true' - використовується для вказівки, чи активний NavLink
- «false» — використовується для запобігання реагування допоміжних технологій на поточне посилання (один варіант використання — запобігання появі кількох тегів поточної області на сторінці)