Как в ReactJS управлять меню с разных страниц?

Question

[DiMoNTD]

Есть несколько страниц, которые помещены в некий layout. Layout представляет из себя шапку, контент и навигацию.

Layout

class MainLayout extends React.Component {

  render () {

    return (
      <div className="l-main">
        <div className="l-main__header">
          <Header/>
        </div>
        <div className="l-main__content">
          {this.props.children}
        </div>
        <div className="l-footer">
          <Navigation/>
        </div>
      </div>
    );
  }
}

Настройка роутинга

class Routes extends Component {
  render () {
    return (
      <Router history={history}>
        <Route path='/' component={Application}>
          <Route component={MainLayout}>
            <Route path='index' component={IndexPage}/>
            <Route path='main' component={MainPage}/>
            <Route path='group' component={GroupPage}/>
          </Route>
        </Route>
      </Router>
    );
  }
}

Внешний вид навигации не меняется, но в зависимости от страницы, обработчики у кнопок навигации должны меняться. В частности, это кнопки "Далее" и "Назад". Т.е. грубо говоря находясь на странице GroupPage, моя кнопка Назад должна обрабатывать событие и возвращать меня на страницу MainPage, а на странице MainPage эта же кнопка назад, должна обрабатывать другие событие и возвращать меня на страницу IndexPage. Как это сделать с текущей структурой?

Можно конечно поместить layout внутрь страниц и там прокидывать через props необходимые обработчики нажатия на кнопки навигации, но мне кажется это неким костылем. Или это нормальная практика?

Answer 1

[vsuhachev]

Если вы делаете приложение с произвольной навигацией то обычно "назад" нужно нажимать в браузере, для чего на каждую страницу делается отдельный роут через адресную строку браузера (history api).

Если же вы делаете Колдуна (Wizard) то (в простом случае) можно сделать так как описали вы, жестко привязать события к UI. А в общем случае нужно реализовать свой роутинг внутри колдуна. Ваш колдун должен понимать на какой он странице и иметь карту переключения странаиц: {[страница, событие] => страница}

Answer 2

[Никита Гущин]

Что касается кнопки назад - сделайте её именно кнопкой, а не ссылкой, и используйте history api:

// JavaScript module import
import { browserHistory } from 'react-router'

const goBack = () => browserHistory.previous()

<button type="button" onClick={goBack}>Назад</button>

А насчет кнопки "далее" - я не совсем понял логику работы. Вы хотите, чтобы она была аналогична кнопке "вперед" в браузере? Тогда делайте так же, как и с кнопкой назад. А если - нет, то вам нужно писать свою логику, т.к. не ясно какую страницу открывать следующей.