将道具通过反应路由器传递到组件

Question

我有一个组件，它是材料表。单击编辑按钮后，我将具有以下功能：

// MaterialTable.js

...
const handleEdit = (e,Data) => {
    console.log(Data)
    return(<EditFunction  id={Data.id} />)
...

这应该运行EditFunction组件，该组件接受props.id并通过其“ id”从API提取数据，并将其填充到自定义表单中以进行编辑，然后再次保存。我在其中显示console.log以显示handleEdit实际上被调用了。所有具有匹配“ id”的数据都将打印在控制台中。

我想通过React路由器来调用它，而不是直接调用该函数。 //Routers.js

...
<Router>
    <Switch>
        <Route path = '/Data/Edit' render= {props=> <Edit/>}/>
    </Switch>
</Router>
...

我的目标是让url读取类似localhost:3000/Data/Edit/id之类的内容，其中id是该特定数据段的ID号。

我不知道如何在MaterialTable.js文件中呈现“链接到”。我知道下面的语法是错误的，但这是我想到的唯一方法。 //MaterialTable.js

const handleEdit = (e,Data) => {
    console.log(Data)

    return(id = {Data.id} component={Link} to=Data/Edit/id)
...

Answer 1

我想出了一个解决方案。以下是列出的文件更改

// Routers.js

...
<Route path = '/Data/Edit/:id' component={Edit}/>
...

// MaterialTable.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。