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

Question

Я использую React, и мой проект структурирован таким образом, что у меня есть компоненты макета, а затем компоненты главной страницы.Я хочу изменить заголовок страницы в компоненте заголовка в зависимости от того, по какому маршруту пришел пользователь.

Вот мой App.jsx:

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

import Header from './layout/Header.jsx';
import Footer from './layout/Footer.jsx';

const  Home = lazy(() => import('./pages/Home.jsx'));
const  Weather = lazy(() => import('.pages/Weather.jsx'));
const  Encryption = lazy(() => import('./pages/Encryption.jsx'));
const  Video = lazy(() => import('./pages/Video.jsx'));

class App extends Component {
render() {
    return (
        <Router>
            <>
                <Header/>
                <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/weather" component={Weather}/>
                    <Route path="/encryption" component={Encryption}/>
                    <Route path="/video" component={Video}/>
                </Switch>
                </Suspense>
                <Footer/>

            </>
        </Router>
    );
}
}

export default App;

Мой компонент Header.jsxвот так:

import React, { Component } from 'react';

class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        <h1>Page Title</h1>
    );
  }
}

export default Header;

Answer 1

трех HOC withRouter предоставит реквизиты match, location и history для вашего компонента.

, затем вы можете использовать location.pathname для управления рендерингом вашегокомпонент

Answer 2

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const path = this.props.location.pathname.slice(1);
    return (
      <div>
        <h1>{path}</h1>
      </div>
    );
  }
}

export default withRouter(Header);

Рабочий пример здесь: https://codesandbox.io/s/zl3y72k0pp