Active Navbar означает, что когда пользователь находится на странице about, ссылка about должна быть выделена в navbar. и когда пользователь находится на другой странице, и ее ссылка доступна в navbar, она должна быть выделена.
Если вы не поняли, то ниже приведена демонстрация того, о чем я говорю и как это будет выглядеть…
Предварительный просмотр
Как видно из приведенной выше демонстрации, когда пользователь нажимает на любой из разделов навигационной панели, маршрут страницы меняется, а название активной страницы выделяется на навигационной панели. Это то, что мы собираемся создать.
Создание макета
Если у вас нет макета, то сначала нужно создать макет. Добавьте компонент Layout в _app.js.
// components/Layout.jsx
import Navbar from "./Navbar";
export default function Layout({ children }) {
return (
<>
<Navbar />
{children}
{/* Footer */}
{/* You can add more things here */}
</>
);
}
В приведенном выше коде видно, что мы импортируем Navbar и затем рендерим Navbar внутри Layout.
Теперь, после создания Layout, нам нужно обернуть все наше приложение Layout’ом. Это должно выглядеть примерно так.
// pages/_app.js
import "../styles/global.css";
import Layout from "./../components/Layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
Создание панели навигации
Создайте файл с именем Navbar.jsx в папке components. Сначала импортируйте Link и useRouter, так как они нужны нам для проверки маршрута текущей страницы.
// components/Navbar.jsx
import { useRouter } from "next/router";
import Link from "next/link";
Затем нам нужно определить все маршруты, которые мы имеем и хотим показать на панели навигации.
// components/Navbar.jsx
const navigationRoutes = ["home", "about", "pricing", "contact"];
export default function Navbar() {
const router = useRouter();
return (
<nav className="nav_container">
{navigationRoutes.map((singleRoute) => {
return (
<NavigationLink
key={singleRoute}
href={`/${singleRoute}`}
text={singleRoute}
router={router}
/>
);
})}
</nav>
);
}
В приведенном выше коде мы определяем router, а затем создаем контейнер nav. После этого я отображаю navigationRoutes и для каждого маршрута мы возвращаем NavigationLink, который мы создадим через минуту.
* Материалы: *
// components/Navbar.jsx
function NavigationLink({ href, text, router }) {
const isActive = router.asPath === (href === "/home" ? "/" : href);
return (
<Link href={href === "/home" ? "/" : href} passHref>
<a
href={href === "/home" ? "/" : href}
className={`${isActive && "nav_item_active"} nav_item`}>
{text}
</a>
</Link>
);
}
Полный код навигации
import { useRouter } from "next/router";
import Link from "next/link";
const navigationRoutes = ["home", "about", "pricing", "contact"];
export default function Navbar() {
const router = useRouter();
return (
<nav className="nav_container">
{navigationRoutes.map((singleRoute) => {
return (
<NavigationLink
key={singleRoute}
href={`/${singleRoute}`}
text={singleRoute}
router={router}
/>
);
})}
</nav>
);
}
function NavigationLink({ href, text, router }) {
const isActive = router.asPath === (href === "/home" ? "/" : href);
return (
<Link href={href === "/home" ? "/" : href} passHref>
<a
href={href === "/home" ? "/" : href}
className={`${isActive && "nav_item_active"} nav_item`}>
<span>{text}</span>
</a>
</Link>
);
}
Здесь мы проверяем, совпадает ли текущий путь маршрутизатора с href, затем возвращаем true для isActive и если текущий маршрут активен, то применяем класс nav_item_active.
Это все, что нам нужно для создания активной навигационной панели, и она работает безупречно. Вы можете посмотреть демонстрацию в реальном времени в следующей песочнице.
Подведение итогов
Если вам понравилась эта статья, то не забудьте нажать ❤️ и добавить ее в закладки для дальнейшего использования. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь, пишите их. До встречи.
Вы можете выразить свою поддержку, купив мне кофе.😊👇
Моя рассылка