How to manage menu from different pages in ReactJS?

Question

JavaScript

There are several pages that are placed in a certain layout. Layout is a header, content and navigation.
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>
    );
  }
}

Routing setup

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>
    );
  }
}

The appearance of the navigation does not change, but depending on the page, the handlers for the navigation buttons should change. In particular, these are the "Next" and "Back" buttons. Those. Roughly speaking, being on the GroupPage page, my Back button should handle an event and return me to the MainPage page, and on the MainPage page, the same back button should handle other events and return me to the IndexPage page. How to do it with the current structure?
Of course, you can put the layout inside the pages and pass the necessary handlers for clicking on the navigation buttons through props, but it seems to me that this is a kind of crutch. Or is this normal practice?

Answer 1

If you are making an application with arbitrary navigation, then usually you need to click "back" in the browser, for which a separate route is made to each page through the browser's address bar (history api).
If you are making a Wizard, then (in a simple case) you can do it as you described, hard-tie events to the UI. And in the general case, you need to implement your own routing inside the sorcerer. Your sorcerer must understand what page he is on and have a page switching map: {[page, event] => page}

Answer 2

As for the back button, make it a button, not a link, and use the history api :

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

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

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

And about the "next" button - I did not quite understand the logic of the work. Do you want it to be similar to the "forward" button in the browser? Then do the same as with the back button. And if not, then you need to write your own logic, because not sure which page to open next.