Accessing the history stack

[jimmed]

Essentially, I have a 'settings' page, which is composed of a few tabs (Links), a pane to display the active tab (the RouteHandler), and a close button.

When the close button is hit, the desired behavior is to go back to the route that was active before the settings page, but for each tab we click on this page, an additional route is added to the history stack.

Is there a way to access the history stack in its entirety, so that I can achieve the desired result?

[christophediprima]

Hi @jimmed
I am also trying to implement something like this. Making a pile of history points and transitionTo and pop the list when the context back button is clicked.

So I created a navigation store that as a backHistory array where I push the history index when needed.

import {History} from 'react-router';
import * as navigationActions from '../navigation/actions';

class ListPage extends Component {
  componentWillMount(){
    this.setState({
      history: History.length  // Should use History.state
    });
  }
  componentWillUnmount(){
    navigationActions.onAddBackHistory(this.state.history);
  }
  ...

import {History} from 'react-router';
import * as navigationActions from '../navigation/actions';

class ItemPage extends Component {
  backToLastHistory(e,backHistory){
    e.preventDefault();
    const lastBackHistoryRecord = backHistory.last();
    const currentHistoryIndex = History.length; // Should use History.state

    navigationActions.onPopBackHistory();

    window.history.go(-(currentHistoryIndex - lastBackHistoryRecord)); // Should use Navigation.transitionTo();
  }
  render() {
    const {navigation} = this.props;

    const items = navigation.get('menu').get('items');
    const backHistory = navigation.get('backHistory');

    return (
        <div className={'page ' + this.props.routeName} style={this.props.pageStyle}>
          <header>
            { backHistory.size !== 0 &&
              <a onClick={(e)=>this.backToLastHistory(e, backHistory)}>Back</a>
            }
            <Menu items={items} />
            ...

The lack I found if I am not missing something, is the ability to History.state and the ability to History.transitionGo().

[christophediprima]

#767

[taion]

• history is a separate project now
• This is essentially a requirement for what we're discussing w/r/t RN support, so better to consolidate discussion there at React Native #743