使用同一组件中的道具用React-Router更改状态组件

Question

我尝试更改Header.js中路由器在道具传递的标题上的状态title。我有更多的路由器，但出于示例的目的，我仅展示了一个。我不知道为什么我的标题一直都是空字符串。

具有路由器的父组件 Header.js ：

  class Header extends Component {
      state = {
        title: ''
      };

      updateTitle(newTitle) {
        this.setState({ title: newTitle });
      }

      render() {
        const { title } = this.state;

        return (

              <Typography>
                  {title}
                </Typography>


              <Switch>
                <Route
                  path="/payment"
                  render={() => (<PaymentPage updateTitle={(title) => this.updateTitle(title)} />)}
                  title="Payment"
                />
              </Switch>

    );

    }

子组件 PaymentPage.js ：

    class PaymentPage extends Component {

    updateTitle('paymentPage') {},

      render() {
        return (
          <div className="payment-page">
            <p>Payment</p>
          </div>
        );
      }
    }