Навбар с динамическим контентом и поведением

Question

Скажем, у меня есть следующее App.js:

App.js

  render() {
    return (
      <div>
        <Navbar />
        <Router>
          <Home path="/" />
          <RouteA path="/routeA" />
          <RouteB path="/routeB" /> 
        </Router>
      </div>
    );
  }

Так что мне нужно <Navbar />, чтобы вести себя и выглядеть по-разному в/routeA и /routeB.

Например, в <Navbar /> есть кнопка возврата.И когда пользователь находится в /routeA, нажатие кнопки «Назад» вернет вас на один шаг в истории.

Однако, когда пользователь находится в /routeB, теперь не только то, что нажатие кнопки btn теперь выдает предупреждение, нам также необходимо отобразить компонент, который имеет обновляемые реквизиты внутри <Navbar />.

Таким образом, я поступаю так: redux: <Navbar /> связан с собственным кусочком состояния в магазине.Затем в моих маршрутах, чтобы сделать динамически навигационную панель соответственно, я отправляю действия с моими function и component, чтобы заставить <Navbar /> вести себя и выглядеть так, как я хочу.Пока все хорошо.

Проблема в том, что мы не можем сериализовать объекты 'function' и 'component' в хранилище, а затем в localalstorage ... так что, как и при обновлении, они исчезли ...

Итак, мой обходной путь для функции заключается в том, что я немедленно отправляю ее в конструктор маршрутов.Принимая во внимание, что для «компонента» я использую метод Portal в моих маршрутах render, чтобы вставить его в мой <Navbar /> ...

Мой вопрос: как бы вы реализовали это по-другому?

Спасибо за чтение!

Answer 1

Вы можете отправить функцию для маршрутизации компонентов и вызвать эту функцию, когда компонент смонтирован, вы можете иметь функции, определенные внутри компонента NavBar, и переключаться в зависимости от страницы, на которой вы находитесь.

updateLayout = (page) => {this.setState({currentPage: page})}
render() {
return (
  <div>
    <Navbar currentPage={this.state.currentPage} />
    <Router>
      <Home path="/" render={()=> <ComponentHome updateLayout={this.updateLayout}>} />
      <RouteA path="/routeA" render={()=> <ComponentA updateLayout={this.updateLayout}>} />
      <RouteB path="/routeB" render={()=> <ComponentB updateLayout={this.updateLayout}>} /> 
    </Router>
  </div>
);

}