时间戳

首页 > 解决方案 > reactjs中如何根据特定路由更改标题样式？

reactjs - reactjs中如何根据特定路由更改标题样式？

问题描述

基本上我有这样的标题，

function Header() {
  return (
    <div className="header">
      <nav className="navbar navbar-expand-lg navbar-light fixed-top ">
        <Link className="navbar-brand order-0 nav-link" to="/">
          DASA
        </Link>
      </nav>
    </div>
  );
}

export default Header;

现在，每当我想要这个标题在主页旁边时。我想要它的fixed-top属性，也想改变background-color我在 css 文件中提到的它。我该怎么做？我也在这里查看了这个答案，但无法弄清楚如何在我的情况下使用它？

这是我的 app.js 文件。

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          {/* Men Category Route  */}
          <Route path="/men">
            <Header></Header>
            <Men></Men>
            <Footer></Footer>
          </Route>

          {/* Women Category Route  */}
          <Route path="/women">
            <Header></Header>
            <Women></Women>
            <Footer></Footer>
          </Route>
          {/* Women Category Route  */}
          <Route path="/kids">
            <Header></Header>
            <Kids></Kids>
            <Footer></Footer>
          </Route>
          {/* Authentication Route */}

          <Route path="/MenCategory">
            <MenProduct></MenProduct>
          </Route>
          <Route path="/signin">
            <Header></Header>
            <Authentication></Authentication>
            <Footer></Footer>
          </Route>
          {/* Home Route */}
          <Route path="/">
            <Header></Header>
            <Home></Home>
            <Footer></Footer>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

现在，我正在用它react-router-dom来改变我的路线等等。如果需要任何其他信息，请告诉我。

标签： reactjs

解决方案

如果您使用的是最新版本，react-router-dom则可以使用该useLocation()钩子。它将返回一个location对象，该对象具有pathname可用于检查 url 并根据需要应用条件的属性。

假设您的主页是根 url '/'。在您Header的组件中执行此操作。

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

function Header() {
  const { pathname } = useLocation();
 
  return (
    <div className="header" style={{ backgroundColor: pathname === '/' ? 'lightblue' : 'lightgreen' }}>
      <nav className={`navbar navbar-expand-lg navbar-light ${pathname === '/' ? 'fixed-top' : ''}`}>
        <Link className="navbar-brand order-0 nav-link" to="/">
          DASA
        </Link>
      </nav>
    </div>
  );
}

export default Header;

推荐阅读