I've seen similar posts but couldn't find an answer and in my case, I'm trying to pass an action from <App />:

  addExpense = (expense) => {

    console.log('Hello From AddExpenseForm');

  }

to /create route where I'm rendering <AddExpenseForm /> component

<Link to={{

  pathname: '/create',

  state: { addExpense: this.addExpense }

}}> Create Expense</Link>

The link is rendered but when I click on it I get an error in console:

Uncaught DOMException: Failed to execute 'pushState' on 'History': function (expense) {

      console.log('Hello From addExpense');

    } could not be cloned

Why is that and what's the workaround here?

My updated code:

Routes in Index.js:

const Routes = () => {

  return (

      <BrowserRouter>

        <Switch>

          <Route path=/ exact component={App} />

          <Route path=/create exact component={AddExpenseForm}/>

          <Route path=/expense/:expenseId name=routename component={ExpenseDetails} />

          <Route component={NotFound} />

        </Switch>

      </BrowserRouter>

  )

}

App.js:

  addExpense = (expense = {}) => {

    console.log('Hello From AddExpenseForm');

  }



  goToNextPage = (addExpense) => {

    this.props.history.push({

      pathname: '/create',

      state: { addExpense: this.addExpense }

    });

  }



  render() {

    return (

      <div>

        <Header

        />

        <button onClick={this.goToNextPage}>Create</button>

        ...