使用react-router-dom中的Link时，为什么在'History'上无法执行'pushState'？

Question

我看过类似的帖子，但找不到答案，就我而言，我正试图通过以下方式采取行动<App />：

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

到/create路线在那里我渲染<AddExpenseForm />组件

<Link to={{
  pathname: '/create',
  state: { addExpense: this.addExpense }
}}> Create Expense</Link>

链接已呈现，但是当我单击它时，控制台出现错误：

Uncaught DOMException: Failed to execute 'pushState' on 'History': function (expense) {
      console.log('Hello From addExpense');
    } could not be cloned

为什么会这样，这里的解决方法是什么？

我更新的代码：

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

Answer 1

首先addExpense，为您的函数 添加一些默认值：

\n\n

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

\n\n

然后使用Link：

\n\n

<Link to={`/ideas/${this.addExpense}`}>Create Expense\xe2\x80\x8b</Link>         \n

\n\n

或者尝试这个（更好的方法）：

\n\n

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

\n\n

在下一个 ( create) 组件中使用传递的值，如下所示：

\n\n

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

\n

Answer 2

就我而言，这是由于尝试路由到具有两个"/"字符的路径引起的。我写了这个：

history.push(`${location.pathname}/somePath`);

...但是如果location.pathname是的"/"话会尝试去"//somePath"，导致错误，