history.push() generates infinite loop

Hi! I am trying to go to another location, using history.push() but it generates this error:

Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

My code looks like this:

export const App = (props) => {
  //reactour
  const [isTourOpen, setOpenTour] = useState(false);

  const openTour = () => {
    setOpenTour(true)
  }
  const closeTour = () => {
    setOpenTour(false)
  }
  return (
    <div >
      <button onClick={openTour}>Open tour</button>
      <Tour isTourOpen={isTourOpen} closeTour={closeTour} />
    </div>
  );
}

const Tour = withRouter(
  ({ isTourOpen, closeTour, location: { pathname }, history }) => {
    const steps = [
      {
        selector: '.first-step',
        content: 'Step 1',
      },
      {
        selector: '[data-tut="tour-burger"]',
        content: 'Step 2!'
      },
      {
        selector: '[data-tut="tour-userMenu"]',
        content: 'Step 3'
      },
      {
        selector: '[data-tut="tour-about"]',
        content: 'Go to another location!',
        action: () => history.push('/about') //<-- ** This line creates an eternal loop **
      },
      {
        selector: '.last-step',
        content: 'This is my last Step',
      }
    ]
    return (
      <Reactour
      steps={steps}
      isOpen={isTourOpen}
      onRequestClose={closeTour}
      update={pathname}
      />
    );
  }
)

By changing the below line of code I can prevent the eternal loop - but it still seems to trigger three times ( ? )

//Old code
action: () => history.push('/about') //<-- ** This line creates an eternal loop **
//Updated code
action: (node) => {console.log('node', node); (!node) ? history.push('/about') : null}

Console log:

node undefined node < h1 data-tut=“tour-about” > node < h1 data-tut=“tour-about” >

Am I missing something basic here? Any help much appreciated! 😃

[nurrgur]

Merhaba, ben sorunu bu şekilde çözdüm.

const changeHistory=(link)=>{ if(op == 0) { history.push(link); setOp(1) setTimeout(() => { setOp(0) }, 200); } } window.changeHistory = changeHistory;

---

action: () => { window.changeHistory(“/settings/orders”) },

[elrumordelaluz]

React Router is better handled on new v2 version released under scoped @reactour package name, please try npm i @reactour/tour. Here is a sandbox example. Every feedback super welcome, thanks!