为什么在使用 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

在我的情况下，这是由于尝试路由到具有两个 "/" 字符的路径引起的。我是这样写的：

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

...但是如果location.pathname 是"/" 则会尝试转到"//somePath"，从而导致错误，

Answer 2

我遇到了同样的问题，但是当我将所有反斜杠更改为如下所示的正斜杠时，错误得到了解决：-

 <li><NavLink to="/">Home</NavLink></li>
               <li><NavLink to="/About">About</NavLink></li>
               <li><NavLink to="/Contact">Contact</NavLink></li>

Answer 3

您正在使用 BrowserRouter，它使用 HTML5 历史 API(window.history)，与 Router 和 HashRouter 不同。

BrowserRouter 的history.push 方法到 HTML5 历史的映射如下：

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

pathname('/create') > window.history.push('create')

state({ addExpense: this.addExpense }) > window.history.pushState({ addExpense: this.addExpense })

实际问题在于window.history.pushState，因为它将状态存储为string，并且大小限制为640k 个字符。

来源：https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Answer 4

就我而言，我使用的是BrowserRouter，但发现我需要运行本地服务器或切换到HashRouter，因为出于安全原因，BrowserRouter 不适用于file:// 路径。

https://github.com/ReactTraining/react-router/issues/6533#issuecomment-451969973

Answer 5

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

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

那么使用Link：

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

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

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

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

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