Изменить цвет фона панели навигации в зависимости от страницы в React

Question

У меня есть прозрачная панель навигации на моей домашней странице.Я хотел бы дать ему черный фон на всех других страницах.Как бы Вы это сделали?

Контекст: Реагируйте, нет Redux.

Answer 1

Если вы правильно используете response-router-dom, вы можете обернуть ваш Navbar компонент с помощью withRouter HOC, а затем получить фактическое местоположение из this.props.match.path.

Тогда это зависит от метода стилевого оформления.вы используете (CSS-in-JS, Styled-Components, Styled-JSX, CSS-модули и т. д.).

Например, если вы используете CSS-in-JS, в вашей функции render вы можете выполнитьэто:

render () {
  const { match: { path, isExact } } = this.props
  const backgroundStyle = path === '/' && isExact === true 
    ? { backgroundColor: 'transparent' }
    : { backgroundColor: 'black' }

  const navbarStyles = {
    ...styles.navbarWrapper,
    ...backgroundStyle
  }

  return (
    <div style={navbarStyles}>
      {/* Actual NavBar content here */}
    </div>
  )
}

Answer 2

Просто проверьте маршрут следующим образом:

  import {withRouter} from 'react-router-dom';
    ...

    const SomeComponent = withRouter(props => <MyComponent {...props}/>);

    class MyComponent extends React.Component {
        ...
        SomeMethod () {
          const {pathname} = this.props.location;
          ...
        }
        ...

    }