为什么`当使用来自react-router-dom的`Link`时，'历史''上执行'pushState'失败？ [英] Why `Failed to execute 'pushState' on 'History'` when using `Link` from react-router-dom?

问题描述

我看过类似的帖子，但找不到答案，在我的情况下，我正试图从< App /> 传递一个动作：

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

到 / create 我正在渲染的路线< 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?

Index.js中的路线：

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>
        ...

推荐答案

首先，在 addExpense 函数中添加一些默认值：

Firstly, add some default value to your addExpense function:

  addExpense = (expense = DEFAULT) => {
    console.log('Hello From addExpense');
  }

然后使用链接 ：

<Link to={`/ideas/${this.addExpense}`}>Create Expense​</Link>         

或尝试此操作（更好的方法）：

  goToNextPage = (addExpense) => {
    this.props.history.push({
      pathname: '/create',
      state: { addExpense: addExpense }
    });
  }

下一步（创建）组件使用传递的值，如下所示：

In next (create) component use the passed on values like this:

this.props.location.state.addExpense();

这篇关于为什么`当使用来自react-router-dom的`Link`时，'历史''上执行'pushState'失败？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！