Поменять цвет шапки в зависимости от пути ссылки

Question

По шаблону нужно, чтобы на странице со ссылкой http://localhost:3000/ был цвет фона шапки синий, а если мы переходим на другую страницу, то цвет фона должен меняться. Как это правильно реализовать?

Есть компонент App.js

function App() {
  return (
    <div className="page">
      <Header loggedIn={true}/>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/movies" element={<Movies />} />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

Это компонент Header.js

import logo from '../../images/logo.svg';
import Navigation from '../../components/Navigation/Navigation';
import React from 'react'
import { Link } from 'react-router-dom';

export default function Header({ loggedIn }) {
    const currentUrl = window.location.href;
    return (
        <header className={(currentUrl === "http://localhost:3000/") ? "header header_blue": "header"}>
            <Link to='/' className='header__link'>
                <img className="header__logo" src={logo} alt="Логотип" />
            </Link>
            <Navigation loggedIn={loggedIn} />
        </header>
    )
}

Как менять класс при нахождении на определенной ссылке?

Answer 1

Для определения, где вы находитесь, используйте хук useLocation

import {useLocation} from "react-router-dom";

function Header({ loggedIn }) {
  const currentUrl = useLocation();
  return (
    <header className={currentUrl.pathname === '/' ? "header header_blue": "header"}>
      <Link to='/' className='header__link'>
        <img className="header__logo" src={logo} alt="Логотип" />
      </Link>
      <Navigation loggedIn={loggedIn} />
    </header>
  )
}

БЛОГ НА HUSL

Поменять цвет шапки в зависимости от пути ссылки

Ответы (1 шт):