当使用react-router-dom中的Link时,为什么在'History'上无法执行'pushState'?
我看过类似的帖子,但找不到答案,就我而言,我正试图通过以下方式采取行动<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>
...
-
首先 ,为您的
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 } }); }
在next(
create
)组件中,使用传递的值,如下所示:this.props.location.state.addExpense();
-
在react-router-dom中withRouter有什么用?
2021-01-31 关注 0 浏览106 1答案
-
react-router vs react-router-dom,何时使用其中之一?
2022-05-26 关注 0 浏览16 1答案
-
如何使用react-router-dom创建动态路由?
2021-01-31 关注 0 浏览319 1答案
-
Uncaught TypeError:无法读取未定义的属性“ push”(React-Router-Dom)
2021-01-31 关注 0 浏览93 1答案
-
React React-router-dom将道具传递给组件
2021-02-02 关注 0 浏览124 1答案
-
React React-router-dom将道具传递给组件
2021-01-31 关注 0 浏览136 1答案
-
如何在 Reactjs 的 react-router-dom 版本 5 中使用 Redirect
2022-07-28 关注 0 浏览10 1答案
-
react-router vs react-router-dom,何时使用一个或另一个?
2021-01-31 关注 0 浏览67 1答案
-
如何在Reactjs的新的react-router-dom中使用重定向
2021-02-02 关注 0 浏览131 1答案
-
尝试导入错误:“useHistory”未从“react-router-dom”导出
2022-07-28 关注 0 浏览13 1答案