如何根据检查的路线更新组件的数据

Question

直接问题：更改路线时如何更新组件的数据（在这种情况下为标题）？

我的项目的结构如下：

我有一个名为Content（content.js）的组件，该组件具有一张卡（该卡属于react-md）。该卡具有CardTitle组件和另一个CardText组件。 CardTitle的props标题会根据导航路线而更改。 CardText组件的内容已用react-router-dom的Route组件修改。

我通过单击链接来实现此数据（标题）更改。但是，如果我通过浏览器（F5）更新，则该数据（标题）将开始为空。

如何检测路线变化并更改标题的值？我怎么知道哪个路由是活动的？

有什么主意吗？

这是我的内容组件

class Content extends Component {

    render() {
        const { title } = this.props;
        return (
            <div>
                <div className="content">
                    <Card className="md-block-centered">
                        <CardTitle title={title} />
                        <CardText>
                            <Route exact path="/client" component={Client} />
                            <Route exact path="/payment" component={Payment} />
                            <Route exact path="/invoice" component={Invoice} />
                        </CardText>
                    </Card>
                </div>

            </div>
        );
    }
}

Content.propTypes = {
    title: PropTypes.string
};

export default Content

我的App.js组件：

import React, { Component } from 'react';
import './App.css';
import Header from './Components/Header'
import Sidebar from './Components/Sidebar'
import Content from './Components/Content';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      sidebarVisible: false,
      title: ""
    };
  }

  ...

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

    return (
      <div>
        <Header showDrawer={this.showDrawer} />
        <Sidebar clickedItem={(label) => {this.setState({title: label})}} handleVisibility={this.handleVisibility} closeDrawer={this.closeDrawer} sidebarVisible={sidebarVisible} />
        <Content title={title}/>
      </div>
    );
  }
}

export default App;

此图片是我加载应用程序时

此图片是当我浏览url'/发票'时