Пропустите опору через реагирующий маршрутизатор к компоненту

Question

У меня есть компонент, который представляет собой таблицу материалов. При нажатии кнопки редактирования у меня есть эта функция:

// MaterialTable. js

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

Предполагается, что для запуска компонента EditFunction, который принимает props.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 - это номер идентификатора указанного элемента данных c.

Я не знаю, как отобразить ссылку на файл MaterialTable. js. Я знаю, что этот синтаксис здесь неправильный, но это единственный способ, которым я могу думать об этом. //MaterialTable.js

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

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

Answer 1

Я нашел решение. Ниже перечислены изменения в файлах

// Маршрутизаторы. 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)
  }

The: in /Data/Edit/:id вызывает функцию редактирования, находит идентификатор проп и помещает его значение в маршрутизатор. В MaterialTable. js этот id определен, а history.push изменяет маршрут на соответствующий URL.