Блог

Я создаю веб-сайт с помощью React, и я хотел бы, чтобы моя панель навигации имела другой цвет фона в зависимости от текущего маршрута. Мой App.js выглядит примерно так:

 class App extends React.Component {

  render() {
    return (
      <Router>
        <div className="App">
          <div className="Navbar" >
            <Navbar />
          </div>
          <div className="Content">
            <Route path="/" exact render={() => <LandingPage />} />
            <Route path="/about" exact render={() => <AboutPage />} />
            <Route path="/contact" exact render={() => <ContactPage />} />
          </div>
        </div>
      </Router>
    );
  }
}
  

Предположим, я хочу прозрачный фон на домашней странице («/»), но сплошной цвет везде, каков наилучший способ изменить background свойство в <Navbar /> CSS для достижения того, чего я хочу?

Предположим, я сохранил свойства CSS, которые хотел бы изменить this.state , а затем вызываю функцию для их изменения всякий раз, когда происходит изменение маршрута?

Вы можете использовать контекстный api для изменения цвета фона любого из ваших компонентов. Итак, вам просто нужно определить значение контекста на основе разных URL-адресов.