Как обновить данные компонента в зависимости от проверенного маршрута

Question

Прямой вопрос: Как обновить данные (в данном случае название) компонента при изменении маршрутов?

Структура моего проекта следующая:

У меня есть компонент с именем Content (content.js), в котором есть карта (эта карта относится к реагирующему md). Эта карта имеет компонент CardTitle и другой компонент CardText. CardTitle имеет название реквизита, которое изменяется в зависимости от пройденного маршрута. Содержимое компонента CardText модифицируется компонентом Route реагирующего маршрутизатора-dom.

Я добился этого, нажав на ссылку, чтобы эти данные (название) изменились. Но если я обновлю через браузер (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 '/ invoice'