React Router: создание единой страницы для данных Json из Api

Question

У меня есть приложение, в котором оно отображает список пользователей из API, и я хочу, чтобы пользователь щелкнул по одному из списка, который он ведет на страницу с информацией о пользователях через React Router.Каков наилучший способ реализовать это в React?

Я пытался решить эту проблему, но ничего не получилось.

Код чувствителен, но вот картина того, что я сделал, такfar: компонент индекса: * маршрут к индексу * маршрут к другим страницам маршрут к одной странице Страница пользователя: * вызов API-интерфейса * данные пользователя, отображаемые с помощью ссылки на их одну страницу Я могу получить доступ к страницам, но не могу передать данные, которые должны быть отображены

Answer 1

Итак, я передал на эту страницу еще один объект через компонент Link, вот пример

<Link   style={{ textDecoration: 'none' }} 
        to={ 
              {
                pathname:`${link}/${row.id}`,
                singleData: row
              } 
  }>
     {currentValue}
 </Link>

Итак, я обнаружил, что вы можете передать другой объект, добавив его в качестве свойства объекта в 'на "Реквизит.Должен был прочитать документацию.Если у вас есть вопросы, просто ответьте

Answer 2

Используйте Link из react-router-dom, чтобы уведомить маршрутизатор об изменении местоположения, а затем попросить маршрутизатор оценить его и определить, что его представление / контейнер загружается с него.

Вот рабочий пример: https://reacttraining.com/react-router/web/example/basic

---

Вот пример кода о том, как вы можете использовать Router для получения этих деталей:

--- Примериспользование маршрутизатора и передача его в реквизит:

 <Route
    exact
    path="/user/view/:id"
    render={props => <CustomerView user={this.state.user} {...props} />
    }
  />

 // By spreading the props into the View you have access to the this.props.match.params.id

--- в вашем пользовательском контейнере

  fetchUser = () => {
    const id = this.props.match.params.id;
    postData("/documents/fetch-document", { id: id }).then(res => {
      this.setState({
        document: res,
        ...this.defaultState,
        isLoading: false
      });
    });
  };