Маршрутизатор React, как получить данные с динамического маршрута

Очень распространенной потребностью при использовании маршрутизатора React с динамическим параметром является извлечение данных, которые нам нужно отобразить на странице.

Например, у нас есть список проектов, и щелчок по нему переходит в подробную информацию о проекте с URL-адресом /проект/ИДЕНТИФИКАТОР ПРОЕКТА_|/.

Я нашел 2 способа сделать это.

Один из них состоит в том, чтобы объявить маршрут таким образом:

Обратите внимание на путь /проект/:идентификатор . Это означает, что компонент будет видеть динамическую часть в параметре id .

Теперь в одном компоненте проекта мы можем использовать крючок использовать параметры для доступа к параметру id :

import { useHistory, useParams } from 'react-router-dom'

//...

const { id } = useParams()

В моем случае я использую этот идентификатор для фильтрации данных из массива элементов, но вы можете запросить базу данных или сделать с ней все, что захотите.

Альтернативный способ – использовать реквизит:

 } />

В компоненте Одного проекта , который отвечает за отображение данных (как я перечислил в визуализации реквизите выше), мы используем реквизит мы проходим:

function SingleProject(props) {
...
}

Эти реквизиты содержат параметры в свойстве match.params , поэтому мы можем использовать деструкцию объекта, чтобы вернуть наш идентификатор :

const { id } = props.match.params

сопоставление также доступно во встроенных визуализированных маршрутах, иногда полезно, потому что мы можем использовать идентификатор параметр для поиска данных публикации в нашем источнике данных перед отображением компонента:

const posts = [
  { id: 1, title: 'First', content: 'Hello world!' },
  { id: 2, title: 'Second', content: 'Hello again!' }
]

const Post = ({post}) => (
  
    {post.title}
    {post.content}
  
)

//...

 (
   p.id === match.params.id)} />
)} />

Оригинал: “https://flaviocopes.com/react-router-data-from-route/”

{post.title}

Читайте ещё по теме: