Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessing the history stack #1496

Closed
jimmed opened this issue Jul 7, 2015 · 3 comments
Closed

Accessing the history stack #1496

jimmed opened this issue Jul 7, 2015 · 3 comments

Comments

@jimmed
Copy link

jimmed commented Jul 7, 2015

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
Copy link

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
Copy link

#767

@taion
Copy link
Contributor

taion commented Nov 7, 2015

  • 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

@lock lock bot locked as resolved and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants