How to pass params into history push

user_12705034 0
Viewed 23214

I have a click handler here that is supposed to help me redirect the page upon clicking the item in the list.

Expectations:

onRowClick: (rowIndex) =>this.props.history.push( {pathname: '/tickets',  param: rowIndex[0]};

Of course however, the code won't work. rowIndex is the param that I wish to pass into the url.

this is the history as logged in my console:

action: "POP"
block: ƒ block(prompt)
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 50
listen: ƒ listen(listener)
location: {pathname: "/tickets", search: "", hash: "#/", state: undefined}
push: ƒ push(path, state)
replace: ƒ replace(path, state)
__proto__: Object

Here is what I have tried:

onRowClick: (rowIndex) =>this.props.history.push({pathname: '/tickets' , id: rowIndex[0]})

however there doesn't seem to have an effect upon clicking

react-router reactjs
4 Answers

Alternatively, if you don't want to show your data in the URL, you can pass it in state:

this.props.history.push('/tickets', { data: rowIndex[0] })

or

this.props.history.push({
  pathname: '/tickets',
  state: {
    data: rowIndex[0],
  },
})

And in the Component, to get the data:

const data = this.props.history.location.state?.data

Read more: react-router and history

user_28735380

Why don't you simple fetch the param ID using match.

Example:

Your Route

<Route path="/tickets/:id" component={Tickets} />

onClick

this.props.history.push(`/tickets/${rowIndex[0]}`);

And then in the Tickets Component, fetch the param Id using match

Tickets Component

console.log(this.props.match.params.id)
user_108661130

try : this.props.history.push('/tickets', rowIndex[0]): the syntax should be : push(route, params)

user_108748060

You can use 'useHistory' from the library 'react-router-dom'if using functional component.

First initialize as below.

 const history = useHistory();

Then you can call whenever wanted

history.push('Path')

For example when clicking a button

onClick{()=>{history.push('/ticket')}}
user_130659720
Related