如何在组件之间传递状态变量

我正在尝试将'year'状态变量传递给Playlist类;到目前为止,当用户在填写完输入后按Enter键时,该输入将保存在Class Home的状态变量“ year”中,但是我需要将其传递给Playlist类,而我在网上发现的内容不适合它据我所见/尝试。

class Home extends Component {
      constructor(props){
         super(props);
         this.state = {
            year: ' '
         };
         this.handleSubmit = this.handleSubmit.bind(this);
         this.updateInput = this.updateInput.bind(this);
      }

      updateInput(event){
         this.setState({year : event.target.value})
      }

      handleSubmit(event){
         alert("Year Submitted");
         this.props.history.push('/playlist');
         event.preventDefault();
      }
  render() {    
     return (
        <div id="body" className="Home">
            <div>
              <form onSubmit={this.handleSubmit}>
                 <input id = "yearInput" autoComplete="off" type="text" placeholder = 
                "Enter Year" onChange={this.updateInput} />
              </form>
            </div>
        </div>
     );
  }
}
class Playlist extends Component{
    constructor(props) {
       super(props);
       this.state = {
         year: ' '
       };
        this.goingBack = this.goingBack.bind(this);
    }

    goingBack(){
        console.log(this.year);
        this.props.history.push("/");
    }

    render(){
        return (
            <div className="Playlist">
                <h1> Playlist </h1>
                <div>
                    <button onClick={this.goingBack}> Go back </button>
                </div>

            </div>
        );
    }
}
export default Playlist;