Можно ли получить ключ от маршрута React для передачи в компонент?

Question

Моя цель состоит в том, чтобы иметь форму редактирования и добавить форму. Теперь моя проблема в том, что когда я нажимаю кнопку «Редактировать», она успешно отображается, но когда нажимается кнопка «Добавить новую», она отображает предыдущие данные.

В настоящее время я пытаюсь использовать отдельные маршруты, но в одном компоненте для добавления / редактирования форм в моем приложении реагирования, как показано ниже:

 <>
    <Switch>
        <Route key="add" path={`${match.url}/new`} component={AgenciesUpdatePage} />
        <Route key="edit" path={`${match.url}/:id/edit`} component={AgenciesUpdatePage} />
        <Route path={`${match.url}/:id`} component={AgenciesViewPage} />
        <Route path={match.url} component={AgenciesListPage} />
    </Switch>
</>

Как получить (ключ) для передачи мой компонент, потому что, насколько я понимаю, ключ необходим для различения двух путей для одного и того же компонента.

В противном случае, если у вас есть другое решение, я хотел бы проверить.

Answer 1

Назначение реквизита key в вашем маршруте - для сопоставления компонентов. AgenciesUpdatePage не сможет получить доступ к его значению, используя вашу текущую реализацию.

Измените ваши маршруты на следующие:

<Route path={`${match.url}/new`} component={() => <AgenciesUpdatePage action="add" />} />
<Route path={`${match.url}/:id/edit`} component={() => <AgenciesUpdatePage action="edit" />} />

Затем обновите ваш AgenciesUpdatePage компонент, чтобы использовать ваш * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * *

const AgenciesUpdatePage = ({ action }) => {
  if (action === 'add') // Render or do something
  if (action === 'edit') // Render or do something

  return (...)
}

* * * * * * * *1014* *