setState, когда выбирается реагирующий маршрутизатор (React)

Question

Я создаю веб-приложение в реагирующей среде. Я пытаюсь изменить состояние на текстовое, когда я вхожу в соответствующий маршрутизатор. Как я могу написать это, чтобы заставить это работать правильно?

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

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

    return (
      <div>
        <Typography variant="h6" color="inherit" noWrap>
          {title}
        </Typography>
        <Switch>
          <Route exact path="/" component={HomePage} title="Dashboard" />
          <Route path="/payment" component={FeaturePage} title="Payment" />
          <Route path="" component={NotFoundPage} />
        </Switch>
      </div>
    );
  }
}

Answer 1

Вы можете передать функцию обновления своим компонентам, продолжая использовать маршрутизатор React, вот так.

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

updateTitle(newTitle){
    this.setState({title: newTitle})
}

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

return (
  <div>
    <Typography variant="h6" color="inherit" noWrap>
      {title}
    </Typography>
    <Switch>
      <Route exact path="/" render={()=> <HomePage updateTitle={this.updateTitle}/>} title="Dashboard" />
      <Route path="/payment" render={()=> <FeaturePage updateTitle={this.updateTitle}/>} title="Payment" />
      <Route path="" component={NotFoundPage} />
    </Switch>
  </div>
);
}
}