Использование компонентов Link и NavLink для навигации по маршруту
React-Router предоставляет компоненты и
Компонент <Ссылка>
Компонент используется для перехода к существующему маршруту
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 совпадает со значением, присвоенным свойству пути в
Когда вы нажмете «Домой», вы увидите отображаемый текст Маршрут «Внутри дома», а когда вы нажмете «Панель инструментов», вы перейдете к маршруту с параметром пути, установленным на /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>
);
}}
/>
Объект местоположения содержит все ранее определенные параметры, включая объект состояния.
Объект состояния можно использовать для хранения данных по мере того, как пользователь перемещается по приложению, и предоставления этих данных компоненту, который обрабатывается следующим в результате совпадения
Компонент NavLink
Компонент
Давайте взглянем на эти реквизиты, которые помогут вам стилизовать компонент
Свойство activeClassName
По умолчанию класс nameactive применяется к компоненту active
<nav>
<NavLink to="/">Home</NavLink>
<NavLink
to="/dashboard"
activeClassName="selectedLink">
Dashboard
</NavLink>
</nav>
Следующим шагом является указание стилей для класса CSS selectedLink в файле CSS вашего приложения. Обратите внимание, что первый
<nav>
<a class="active" aria-current="page" href="/">Home</a>
<a aria-current="page" href="/dashboard">Dashboard</a>
</nav>
Однако при нажатии второго
<nav>
<a aria-current="page" href="/">Home</a>
<a class="selectedLink" aria-current="page" href="/dashboard">Dashboard</a>
</nav>
Опора activeStyle
Свойство activeStyle также используется для стилизации выбранного
<NavLink
to="/user"
activeStyle={{
background:'red',
color:'white'
}}>
User
</NavLink>
Точная опора
Когда вы щелкаете
В этом случае точное свойство может использоваться для применения активного класса или activeStyle только тогда, когда путь соответствует URL-адресу браузера:
<NavLink
to="/"
exact>
Home
</NavLink>
<NavLink
to="/dashboard"
activeClassName="selectedLink">
Dashboard
</NavLink>
Строгая опора
Компонент
<NavLink
to="/dashboard/"
activeClassName="selectedLink"
strict>
Dashboard
</NavLink>
Здесь класс selectedLink применяется к компоненту
Свойство isActive
Свойство 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, отображается соответствующий маршрут, определенный с помощью
Расположение реквизита
Функция isActive в
<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.
