React.js stepper

Question

Здравствуйте, я пытаюсь создать свой нижний колонтитул, который в основном является степлером, который будет информировать пользователей о том, где они находятся в приложении.

Footer (шаговый) компонент:

export default class Footer extends Component { 

    render() { 
    return (
     <MuiThemeProvider> 
     <div className="row"> 
      <div className="footer"> 
      <div className="container-fluid" style={containerStyle}> 
       <div className="col-sm-12"> 
       <div className="steps" style={stepStyle}><img src={trailerGray} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       <div className="steps" style={stepStyle}><img src={clockIcon} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       <div className="steps" style={stepStyle}><img src={shieldGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       <div className="steps" style={stepStyle}><img src={detailsGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       <div className="steps" style={stepStyle}><img src={detailsGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </MuiThemeProvider> 
); 
} 
} 

Я хотел бы сделать DIV, который оборачивает изображения, чтобы изменить цвет фона в зависимости от маршрута

И я добавить свой колонтитула компонент другого вида :

<Footer />

Я использую реагировать-маршрутизатор

Не могли бы вы предложить путь, по которому мне следует идти? Также приветствуются любые предложения. Спасибо

Answer 1

Вы можете сохранить путь в состоянии редуктора. Получите это состояние в нижнем колонтитуле и добавьте второй стиль в зависимости от того, какой путь является хорошим в шаге шага.