React Router е стандартна библиотека за маршрутизиране в React. Той позволява навигация между изгледи от различни компоненти в приложение на React, позволява промяна на URL адреса на браузъра и поддържа потребителския интерфейс в синхрон с URL адреса.
За да разберете как работи React Router, нека създадем просто приложение за React. Приложението ще включва компоненти за дом, информация и контакт. Ще използваме React Router за навигация между тези компоненти.
npx create-react-app
Вашата среда за разработка е готова. Нека сега инсталираме React Router в нашето приложение.
React Router : React Router може да бъде инсталиран във вашето React приложение чрез npm. Следвайте стъпките по-долу, за да настроите рутера във вашето приложение React:
Стъпка 1: CD във вашата директория на проекта, т.е ., java.
Стъпка 2: Използвайте следната команда, за да инсталирате React Router:
npm install - -save react-router-dom
ако иначе в java
След като инсталирате 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. В директорията на вашия проект създайте папка с име components в папката src и сега добавете 3 файла с имена home.js, about.js и contact.js в папката с компоненти.
Нека добавим малко код към нашите 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 ( ); } } Връзки: Нека сега създадем връзките на нашите компоненти. Компонентът Link използва props, за да опише местоположението, до което трябва да навигира връзката.
<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
Ако е вярно, маршрутизаторът ще използва опресняване на цяла страница в навигацията на страницата. Може да искате да използвате това, за да имитирате как би работило традиционно изобразено от сървър приложение с опресняване на цяла страница между навигацията на страницата.
keyLength: номер
Дължината на местоположението. Ключ. По подразбиране е 6.
деца: възел- дъщерен елемент за изобразяване.
Забележка: В React трябва да използвате един дъщерен елемент, тъй като методът за изобразяване не може да върне повече от един елемент. Ако имате нужда от повече от един елемент, можете да опитате да ги обвиете в допълнителен или .
A, който използва хеш частта на URL адреса (т.е. window.location.hash), за да поддържа потребителския ви интерфейс в синхрон с URL адреса.
Забележка: хешът не поддържа местоположение в историята. Ключ или местоположение. състояние. В предишни версии се опитахме да намалим поведението, но имаше крайни случаи, които не можахме да разрешим. Всеки код или плъгин, който изисква това поведение, няма да работи.
Тъй като тази технология е предназначена да поддържа само по-стари браузъри, препоръчваме ви да конфигурирате вашия сървър за работа вместо това.
основно име: низ
Основният 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 . Наличните стойности са:
- 'наклонена черта' - създава хешове като #/ и #/sunshine/lollipops
- 'noslash' - # и #sunshine/lollipops . като хеш създава
- 'hashbang' - създава 'ajax crawlable' (отхвърлен от google) хешове като #!/ и #!/sunshine/lollipops
По подразбиране е 'наклонена черта'.
деца: възел
Един дъщерен елемент за изобразяване.
Осигурява декларативна, достъпна навигация около вашето приложение.
About
до: низ
Низово представяне на местоположение на връзка се създава чрез комбиниране на името на пътя, търсенето и хеш свойствата на местоположението.
Обект, който може да има някое от следните свойства:
към: функ
Функция, в която текущото местоположение се предава като аргумент и която трябва да върне представянето на местоположението като низ или обект.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> замени: bool
Когато е вярно, щракването върху връзката ще замени текущия запис, вместо да добави нов
entry to the history stack.
вътрешна реф.: функ
От React Router 5.1, ако използвате React 16, не трябва да се нуждаете от тази опора, тъй като ние препращаме рефа към основния . Вместо това използвайте нормален реф.
ред по случаен sql
Позволява достъп до вградената реф.
{ // `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: низ
клас за даване на елемента, когато е активен. Даденият клас по подразбиране е активен. Той ще бъде комбиниран с проп на името на класа.
стил: обект | функ
style може да бъде 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> строг: bool
Ако е вярно, наклонената черта в края на името на пътя на местоположението ще бъде взета предвид, когато се определя дали местоположението съответства на текущия 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, използван в активната връзка. Наличните стойности са:
- 'страница' - използва се за обозначаване на връзка в рамките на набор от връзки за страници
- „Стъпки“ – използва се за обозначаване на връзка в рамките на индикатора за стъпки за базиран на стъпки процес
- 'локация' - използва се за указване на изображение, което е визуално подчертано като текущия компонент на диаграмата
- 'дата' - използва се за указване на текущата дата в календара
- 'време' - използва се за посочване на текущия час в разписание
- 'true' - използва се за указване дали NavLink е активен
- 'false' - използва се за предотвратяване на помощните технологии да реагират на текущата връзка (един случай на използване би бил да се предотвратят множество маркери за текуща област на страница)