Состояние или реквизит для динамического фона

Question

Я пробую фон моего приложения, основываясь на маршруте, который они посещают. Я не уверен, что смог бы достичь желаемых результатов, просто используя реквизит, как показано на рисунке. В идеале я хотел бы установить значения color_one и color_two в определенных маршрутах. Должно ли государство использоваться для достижения результатов, которые я ищу, вместо реквизита? Как так?

Фоновый компонент:

class Background extends Component {
render() { 
    let backgroundStyle = {
        width: "100%",
        height: "100%",
        position: "fixed",
        left: 0,
        top: 0,
        backgroundImage: `linear-gradient(to right, ${ this.props.color_one } 0%, ${ this.props.color_two } 100%)`
    };
    return (
        <div style={backgroundStyle}></div>
      );
}

}

Компонент макета (класс Wrapper):

class Layout extends Component {
render() {
    return (
       <Auxillary>
           <Background color_one='green' color_two="blue"/>
           <div className={classes.Content}>{this.props.children}</div> 
       </Auxillary>
    );
}

Компонент приложения:

class App extends Component {
render() {
  return (
   <div>
    <Layout>
       <Route path="/"  exact render={Home} />
       <Route path="/about" component={About} />
    </Layout>
  </div>
);

} }