Изменить состояние, если я выберу другой React Router?

Question

Я пытаюсь отобразить значение реквизита от маршрутизатора реагирования в месте {title}, но я не знаю, возможно ли это.

Если маршрутизатор '/dashboard', {title} = «Панель инструментов», Иначе, если роутер '/payment', {title} = 'Оплата'

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

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

  return (
     <Typography>
         {title}
     </Typography>

  <Switch>
    <Route title="Dashboard" exact path="/dashboard" component={DashboardPage} />
    <Route title="Payment" path="/payment" component={PaymentPage} />
  </Switch>
  )

Answer 1

Метод 1: Вы можете обернуть свой компонент Header с помощью withRouter, который предоставляет местоположение в качестве реквизита, в котором есть путь. Вы можете использовать это, чтобы изменить заголовок.

Способ 2: вы передаете функцию в качестве опоры DashboardPage, которая устанавливает состояние заголовка в компоненте Header.

В компоненте Header:

_setTitle = (title) => this.setState({ title })

Передайте _setTitle, как показано ниже

<Route
  path='/dashboard'
  exact
  render={(props) => <DashboardPage {...props} setTitle={this._setTitle} />}
/>

В конструкторе компонента DashboardPage выполните setTitle, чтобы установить правильный заголовок, как показано ниже:

class DashboardPage extends Component {
    constructor(props) {
      super(props);
      this.props.setTitle('Dashboard');
    }
}

Сделайте то же самое для PaymentPage.

Это должно работать. Дайте мне знать, если это решит вашу проблему.