Блог

Главная - Вопросы по программированию - Новичку в ReactJS нужна помощь для простого spa

Новичку в ReactJS нужна помощь для простого spa

#api #express #reactjs #components #react-router

#API #экспресс #reactjs #Компоненты #react-router

Вопрос:

Мне нужно увидеть некоторые фрагменты кода для всех трех компонентов.

Я хочу создать это простое одностраничное приложение.

Он состоит из трех компонентов: приложения, навигации и контейнера.

Данные поступают из api в этой форме:

  [{
  "category": "dogs",
  "available": [
   {
     "name": "pedro",
     "breed": "chihuahua"
   },
   {
     "name": "roxane"
     "breed": "beagle"
   }
  ]
 },
 {
  "category": "cat",
  "available": [
  {
    "name": "garfield",
    "breed": "tobby"
  }
 ]
}]

На навигаторе отображаются все категории.

В контейнере отображается текущая выбранная категория и ВСЕ пары название-порода для этой категории.

пример: Нажмите на Собак

Собаки

Педро

Чихуахуа

Роксана

Beagle

Мои опасения

На данный момент у меня возникли проблемы с маршрутизацией навигационной панели и отображением ВСЕХ пар имя-порода для выбранной категории.

Я знаю, что есть два способа сделать это:

1- использование express для маршрутизации и контроллера react для выборки

2- изоморфная выборка react, react router, redux для сохранения состояния

Комментарии:

1. Я понимаю, что вы новичок и пытаетесь узнать, как это сделать, но этот сайт используется для ответов на вопросы и исправления ошибок, а не для выполнения работы за вас. Может быть, попробовать пару вещей, и когда вы застряли, задайте более конкретные вопросы? Начните с простого, забудьте о express и контроллерах и даже о серверной части. Просто скопируйте, вставьте этот объект в свой App и используйте его для анализа и создания Router for react-router .

2. Хорошо, извините, как бы вы создали маршрутизатор для неопределенного количества категорий? например, если в api есть собаки, кошки, лягушки и т. Д. Я хочу, чтобы он был динамичным. Я проверял учебные пособия все выходные, чтобы получить основы, и в этой части мне не повезло. Спасибо за ваш отзыв.

3. Вы будете использовать маршрут, связанный с /XXX/:id или что-то в этом роде. Документация охватывает все это, и везде есть руководство.

4. Честно говоря, руководства по react-router немного повсюду, не говоря уже о том, что большинство из них используют устаревшие (старше 2 месяцев?) версия библиотеки. Но да, то, что упомянул @Dandy, верно: вы хотите использовать переменную маршрутизацию, которая будет передана в router prop компонента, если вы используете withRouter предоставленный react-router

Метки: