如何根据react js中的特定路由更改标题样式？

Question

基本上我有一个这样的标题，

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改变我的路线等等。如果需要任何其他信息，请告诉我。

Answer 1

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

假设你的主页是 root 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;