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?
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>
...
Firstly , add some default value to your addExpense
function:
addExpense = (expense = DEFAULT) => {
console.log('Hello From addExpense');
}
Then Use Link
:
<Link to={`/ideas/${this.addExpense}`}>Create Expense</Link>
OR Try this ( Better Approach ):
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();
You are using BrowserRouter
which uses HTML5 history API( window.history
), unlike Router
and HashRouter
.
Mapping of BrowserRouter's history.push
method to HTML5 history is below:
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 })
The actual issue is with window.history.pushState
as it stores the state as a string
and has size limit of 640k characters .
Source : https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
In my case, I was using BrowserRouter
and found out that I either needed to run a local server or switch to HashRouter
since BrowserRouter
does not work with a file://
path due to security reasons.
https://github.com/ReactTraining/react-router/issues/6533#issuecomment-451969973
I was getting the same issue but when I changes all my backward slashes to forward slashes like below , error got resolved :-
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink to="/About">About</NavLink></li>
<li><NavLink to="/Contact">Contact</NavLink></li>
In my case, it was caused by trying to route to a path with two "/"
characters. I wrote this:
history.push(`${location.pathname}/somePath`);
... but if location.pathname
is "/"
that will try to go to "//somePath"
, causing the error,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.