[英]Pass prop through react router to component
我有一个组件,它是一个材料表。 点击编辑按钮,我有这个功能:
//材质表.js
...
const handleEdit = (e,Data) => {
console.log(Data)
return(<EditFunction id={Data.id} />)
...
这应该运行EditFunction
组件,该组件接收 props.id 并通过它的“id”从 API 中提取数据,并将其填充到自定义表单中进行编辑,然后再次保存。 我在那里有 console.log 来显示实际上调用了 handleEdit,它是。 与“id”匹配的所有数据都打印在控制台中。
我想通过反应路由器调用它,而不是直接调用该函数。 //Routers.js
...
<Router>
<Switch>
<Route path = '/Data/Edit' render= {props=> <Edit/>}/>
</Switch>
</Router>
...
我的目标是让 url 读取类似localhost:3000/Data/Edit/id
,其中 id 是该特定数据的 ID 号。
我不知道如何在 MaterialTable.js 文件中呈现链接。 我知道这里的语法是错误的,但这是我能想到的唯一方法。 //材质表.js
const handleEdit = (e,Data) => {
console.log(Data)
return(id = {Data.id} component={Link} to=Data/Edit/id)
...
我想出了一个解决方案。 下面是列出的文件更改
//Routers.js
...
<Route path = '/Data/Edit/:id' component={Edit}/>
...
//材质表.js
const handleEdit = (e,Data) => {
const id = Data.id
let idUrl = '/Data/Edit/' + id
props.history.push(idUrl)
}
/Data/Edit/:id
调用 Edit 函数并找到 prop 'id' 并将其值放在路由器中。 在 MaterialTable.js 中,该id
被定义并且history.push
将路由更改为适当的 url。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.