Использование компонентов Link и Navlink для перехода к маршруту

Автор оригинала: PACKT.

React-Router предоставляет компоненты и , которые позволяют навигаться к различным маршрутам, определенным в приложении. Эти навигационные компоненты можно рассматривать как похожие на якорные ссылки на странице, которая позволяет вам перейти на другие страницы на сайте. На традиционном веб-сайте, когда вы перемещаетесь через приложение с помощью ссылок на привязку, он приводит к обновлению страницы, и все компоненты на странице повторно отображаются. Навигационные ссылки, созданные с помощью и не приводят к обновлению страницы; Только те определенные разделы страницы, которые определяются с помощью <маршрута> и соответствуют пути URL, обновляются.

Компонент

Компонент используется для перехода к существующему маршруту , который определяется с помощью компонента <маршрута>. Чтобы перейти к маршруту, укажите путь, используемый в маршруте в качестве значения до опор:

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

classAppextendsComponent {
    render() {
        return (
            

                
                
                
            
        );
    }
}

Обратите внимание, что значение PROP является таким же, как значение, присвоенное Path Prop в <маршруте>. Страница теперь оказывает две ссылки:

Когда вы нажимаете на дому, вы увидите текст внутри домой.

Когда вы перейдите к маршруту, используя , stink.push (), который добавляет запись в стек истории. Таким образом, когда вы нажимаете на заднюю кнопку браузера, вы будете перемещаться к предыдущему маршруту, который вы получили доступ к (домашний маршрут). Как упоминалось в предыдущей главе, библиотека истории используется React-маршрутизатором для поддержания состояния приложения в качестве пользовательского прохода через различные маршруты во время путешествия приложения.

Компонент имеет два других реквизита-замены и innerref.

Заменить опоры

Замените PROP в <Ссылка> Звонки stall.replace (), которые заменяет текущую запись в стеке истории с новым именем пути, упомянутым в процессе:

Dashboard

Например, если вы получите доступ к странице на пути/домой, доступ к предыдущей ссылке заменит текущую запись в стек истории с помощью/приборной панелью, что в основном заменяет запись/дом с/приборной панелью.

Innerref Prop.

Реагирование обеспечивает REF для получения ссылки на элемент отображения DOM. Эта ссылка (REF) может использоваться для выполнения определенных операций вне регулярного потока, такого как фокусировка на входном элементе, воспроизведении носителя и т. Д. – это композитный компонент, и он делает анкерный элемент на DOM.

Компонент , упомянутый в предыдущем фрагменте кода, переводит на анкерные элементы следующим образом:

..

..

Чтобы получить ссылку на этот оказанный якорный элемент, innnerref innerref добавляется в :

Innerref Rupp принимает функцию обратного вызова в качестве значения; Здесь функция refsallback указывается как значение для innerref Prup. Refcallback получает ссылку на внутренний элемент компонента :

refCallback(node) {
node.onmouseover= () => {
node.focus();
}
}

Функция обратного вызова-REFCALLBACK – вызывается, когда компонент Components. Из фрагмента предыдущего кода мы можем видеть, что обработчик для мыши добавляется как для опорных элементов, отображаемых двумя компонентами . Когда пользователь охватывает ссылку, соответствующий якорь получает фокус.

Прокрутить объект

Для опоры можно либо строку, либо объект. Объект может содержать следующие свойства: • Pathname: путь для навигации по • Поиск: Параметры запроса к пути, представленные в виде строкового значения • HASHH: a Hash String для добавления к URL-адресу • Состояние: объект, содержащий информацию о состоянии что оказанный компонент может потреблять

Используя эти параметры, давайте добавим компонент :

    User

Предыдущий код переводит к следующему:

User

Государственная информация не включена в путь URL; Тем не менее, он доступен для компонента, который оказывается в результате A Match:

 {
const { pathname, search, hash, state } = location;
return (

Inside User route
Pathname: {pathname}
Search: {search}
Hash: {hash}
State: {'{'}
{Object.keys(state).map((element, index) => {
return (

{element}: {state[element].toString()}

)
})}
{'}'}


);
}}
/>

Объект местоположения содержит все ранее определенные параметры, включая объект состояния.

Государственный объект можно использовать для хранения данных, так как пользователь навигациирует через приложение, и предоставляет эти данные компонент, который отображается следующим в результате совпадения <маршрута>.

Компонент Навилинка

Компонент аналогичен компоненту , за исключением того, что можно указать несколько реквизитов, которые помогут вам условно добавлять атрибуты styling к отображенному элементу. Он принимает тот же набор реквизитов, что и компонент (to, заменить и innerref) для навигации к маршруту, и он включает в себя реквизит для стиля выбранного маршрута.

Давайте посмотрим на эти опоры, которые помогут вам стиль компонент .

ActiveClassname Prop.

По умолчанию класс Tameactive применяется к Active компонент. Например, когда нажат , и соответствующий маршрут отображается, выбранный имеет его имя класса, установленное точно. Чтобы изменить имя этого класса, укажите ActiveClassname Prop на компоненте со своим значением, установленным в качестве имени класса CSS, которое вы хотите подать заявку:

Следующим шагом является уточнение стилей для класса CSS, выбранного в файле CSS вашего приложения. Обратите внимание, что первый не указывает опоры ActiveClassname. В этом случае, когда нажал , добавляется активный класс:

Тем не менее, когда нажат второй , применяется класс «Выбрать»:

Пропорция ActiveStyle

Puctestyle Prop также используется для стиля выбранного . Однако вместо того, чтобы обеспечить класс для применения, когда выбран , свойства стиля CSS могут быть предоставлены встроенные:

User

Точный опора Когда вы нажимаете на с помощью Dashboard, в Dashboard активный класс (или встроенный стиль, указанный в AcciveStyle Prop), применяется как к компонентам на странице. Похоже на компонент <маршрут>,/in/dashboard соответствует пути, указанному в prop, и, таким образом, активный класс применяется как к компонентам .

В этом случае точная опора может быть использована для применения активного класса или акции ActiveStyle только тогда, когда путь соответствует URL-адресу браузера:

Home


Dashboard

Строгий опора Компонент также поддерживает строгого опоры, который можно использовать для соответствия конечной косулью, указанной в PROP:

    Dashboard

Здесь выделенный класс наносится на компонент только тогда, когда путь URL-адреса браузера соответствует примеру Path/Dashboard/- для приведенного примера трейлинга в URL.

Абсурдный опорный

Isactactact Prup используется для определения того, должен ли компонент иметь Active Class Class (или встроенные стили, указанные в пропорте ActiveStyle). Функция, указанная в качестве значения для isacactact App, должна вернуть логическое значение:

 {
if (!match) {
returnfalse;
}
constsearchParams = newURLSearchParams(location.search);
returnmatch.isExact && searchParams.has('id');
}}>
User

Из предыдущего примера функция принимает два параметра матча и местоположение. Стили, определенные в пропорте AcciveStyle, применяются только в том случае, если условие Match.isexact && SearchParams.has («ID») оценивает true, поэтому только тогда, когда совпадение точным, а URL-адрес имеет идентификатор параметра запроса.

Когда URL-адрес браузера находится/пользователь, отображается соответствующий маршрут, определенный с помощью <маршрута>. Однако компонент будет иметь стиль по умолчанию, а не стили, упомянутые в Puctestyle Prop, поскольку идентификатор параметра запроса отсутствует.

Расположение опоры Истичная функция в получает местоположение истории браузера и определяет, соответствует ли местоположение браузера. Чтобы обеспечить другое местоположение, включите опору расположения:

 {
if (!match) {
returnfalse;
}
constsearchParams = newURLSearchParams(location.search);
returnmatch.isExact && searchParams.has('id');
}}>
User

Обратите внимание, что для опоры не указывает параметр поиска; Однако опора расположения содержит его, и, таким образом, когда местоположение браузера является/пользователь, это активная функция возвращает true, поскольку параметр поиска включает в себя свойство ID.

Если вы нашли эту статью полезную, вы можете исследовать React Router Краткое начало Руководство Отказ Заполнены многочисленными примерами рук, React Router Краткое начало Руководство Помогает вам узнать, как создавать и настроить маршруты, используя разные компоненты React Router.