如何将参数传递给历史推送

Question

我在这里有一个点击处理程序，它可以帮助我在点击列表中的项目时重定向页面。

期望：

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

当然，代码将不起作用。rowIndex 是我希望传递到 url 的参数。

这是在我的控制台中记录的历史记录：

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

这是我尝试过的：

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

但是似乎对点击没有影响

Answer 1

或者，如果您不想在 URL 中显示数据，则可以在状态中传递它：

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

或者

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

在组件中，获取数据：

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

阅读更多：react-router和历史

Answer 2

为什么不简单地使用匹配来获取参数 ID。

例子：

你的路线

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

点击

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

然后在 Tickets 组件中，使用 match 获取参数 Id

门票组件

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