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

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

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

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

classAppextendsComponent {
    render() {
        return (
            <div class="container">
                <nav>
<Link to="/">Home</Link>
<Link to="/dashboard">Dashboard</Link>
                </nav>
                <Route
                    path="/"
                    component={HomeComponent}
                    exact 
                />
                <Route
                    path="/dashboard"
                    component={DashboardComponent} 
                />
            </div>
        );
    }
}

Обратите внимание, что значение свойства to совпадает со значением, присвоенным свойству пути в . Теперь на странице отображаются две ссылки:

1.png

Когда вы нажмете «Домой», вы увидите отображаемый текст Маршрут «Внутри дома», а когда вы нажмете «Панель инструментов», вы перейдете к маршруту с параметром пути, установленным на /dashboard.

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

Компонент имеет еще два свойства — replace и innerRef.

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

Свойство replace в вызывает history.replace(), которая заменяет текущую запись в стеке истории новым именем пути, указанным в свойстве to:

<Linkto="/dashboard" replace>Dashboard</Link>

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

Свойство innerRef

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

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

..
<nav>
<a href="/">Home</a>
<a href="/dashboard">Dashboard</a>
</nav>
..

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

<nav>
<Link 
to="/"
innerRef={this.refCallback}>
Home
</Link>
<Link
to="/dashboard"
innerRef={this.refCallback}>
Dashboard
</Link>
</nav>

Свойство innerRef принимает в качестве значения функцию обратного вызова; здесь функция refCallback указывается как значение свойства innerRef. refCallback получает ссылку на внутренний элемент компонента:

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

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

Подпирать объектом

Свойство to может быть либо строкой, либо объектом. Объект может содержать следующие свойства:
• pathname: путь для перехода
• поиск: параметры запроса к пути, представленному в виде строкового значения.
• hash: хэш-строка для добавления к URL-адресу.
• состояние: объект, содержащий информацию о состоянии, которую визуализированный компонент может использовать.

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

<Link
to={{
pathname:'/user',
search:'?id=1',
hash:'#hash',
state: { isAdmin:true }
    }}>
    User
</Link>

Предыдущий код преобразуется в следующее:

<a href="/user?id=1#hash">User</a>

Информация о состоянии не включается в URL-адрес; однако он доступен компоненту, который отображается в результате совпадения :

<Route
path="/user"
render={({ location }) => {
const { pathname, search, hash, state } = location;
return (
<div>
Inside User route
<h5>Pathname: {pathname}</h5>
<h5>Search: {search}</h5>
<h5>Hash: {hash}</h5>
<h5>State: {'{'}
{Object.keys(state).map((element, index) => {
return (
<spankey={index}>
{element}: {state[element].toString()}
</span>
)
})}
{'}'}
</h5>
</div>
);
}}
/>

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

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

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

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

Свойство activeClassName

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

<nav>
    <NavLink to="/">Home</NavLink>
<NavLink
to="/dashboard"
activeClassName="selectedLink">
Dashboard
    </NavLink>
</nav>

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

<nav>
    <a class="active" aria-current="page" href="/">Home</a>
    <a aria-current="page" href="/dashboard">Dashboard</a>
</nav>

Однако при нажатии второго применяется класс selectedLink:

<nav>
    <a aria-current="page" href="/">Home</a>
    <a class="selectedLink" aria-current="page" href="/dashboard">Dashboard</a>
</nav>

Опора activeStyle

Свойство activeStyle также используется для стилизации выбранного . Однако вместо предоставления класса для применения при выборе свойства стиля CSS могут быть предоставлены встроенными:

<NavLink
    to="/user"
activeStyle={{
background:'red',
color:'white'
}}>
User
</NavLink>

Точная опора
Когда вы щелкаете с помощью to prop /dashboard, активный класс (или встроенный стиль, указанный в ActiveStyle prop) применяется к обоим компонентам на странице. Подобно компоненту , /in/dashboard соответствует пути, указанному в свойстве to, и, таким образом, активный класс применяется к обоим компонентам .

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

<NavLink
    to="/"
exact>
Home
</NavLink>
<NavLink
to="/dashboard"
activeClassName="selectedLink">
Dashboard
</NavLink>

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

<NavLink
    to="/dashboard/"
    activeClassName="selectedLink"
    strict>
    Dashboard
</NavLink>

Здесь класс selectedLink применяется к компоненту только в том случае, если путь URL-адреса браузера совпадает с путем /dashboard/, например, когда в URL-адресе присутствует косая черта.

Свойство isActive

Свойство isActive используется для определения того, должен ли к компоненту применяться активный класс (или встроенные стили, указанные в свойстве activeStyle). Функция, указанная в качестве значения свойства isActive, должна возвращать логическое значение:

<NavLink
    to={{
pathname:'/user',
search:'?id=1',
hash:'#hash',
state: { isAdmin:true }
}}
activeStyle={{
background:'red',
color:'white'
}}
isActive={(match, location) => {
if (!match) {
returnfalse;
}
constsearchParams = newURLSearchParams(location.search);
returnmatch.isExact && searchParams.has('id');
}}>
User
</NavLink>

Из предыдущего примера функция принимает два параметра — match и location. Стили, определенные в реквизите activeStyle, применяются только тогда, когда условие match.isExact && searchParams.has(‘id’) оценивается как истинное, то есть только тогда, когда совпадение является точным и URL-адрес имеет идентификатор параметра запроса.

Если URL-адрес браузера — /user, отображается соответствующий маршрут, определенный с помощью . Однако компонент будет иметь стиль по умолчанию, а не стили, упомянутые в реквизите activeStyle, поскольку идентификатор параметра запроса отсутствует.

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

<NavLink
    to="/user"
activeStyle={{
background:'red',
color:'white'
}}
location={{
search:'?id=2',
}}
isActive={(match, location) => {
if (!match) {
returnfalse;
}
constsearchParams = newURLSearchParams(location.search);
returnmatch.isExact && searchParams.has('id');
}}>
User
</NavLink>

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

Если вы нашли эту статью полезной, вы можете изучить Краткое руководство по React Router. Наполненный многочисленными практическими примерами, Краткое руководство по React Router поможет вам научиться создавать и настраивать маршруты с помощью различных компонентов React Router.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *