动态背景的状态或道具

Question

我正在根据他们正在访问的路线来尝试我的应用程序的背景。我不确定只要使用所示的道具就可以达到我想要的结果。理想情况下，我想在特定路线内设置color_one和color_two值。应该使用state而不是prop来达到我想要的结果吗？怎么这样？

背景组件：

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>
      );
}

}

布局组件（包装类）：

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>
);

} }