如何使用React导航动态更改选项卡标题？

import React from 'react';
import { Link } from 'react-router-dom';

class TabNavigation extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/tab1">Tab 1</Link>
          </li>
          <li>
            <Link to="/tab2">Tab 2</Link>
          </li>
          <li>
            <Link to="/tab3">Tab 3</Link>
          </li>
        </ul>
        <div>
          {/* 根据当前路由显示对应的内容 */}
          {this.props.children}
        </div>
      </div>
    );
  }
}

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

class App extends React.Component {
  render() {
    return (
      <Router>
        <TabNavigation>
          <Route path="/tab1" component={Tab1} />
          <Route path="/tab2" component={Tab2} />
          <Route path="/tab3" component={Tab3} />
        </TabNavigation>
      </Router>
    );
  }
}

import React from 'react';

class Tab1 extends React.Component {
  componentDidMount() {
    document.title = 'Tab 1';
  }

  componentWillUnmount() {
    document.title = 'My App';
  }

  render() {
    return <div>Tab 1 Content</div>;
  }
}