Блог

Я создаю приложение для рецептов в react для практики. Идея заключается в том, что как только вы нажмете на миниатюру рецепта на главной странице, вы попадете в новый html-файл, посвященный выбранному рецепту. Я хочу, чтобы в будущем у него была возможность добавлять новые рецепты, поэтому он должен быть динамичным.

Поэтому я хотел бы сохранить данные рецептов в базе данных и создать подстраницу рецептов с помощью react после нажатия соответствующей миниатюры (в конечном итоге я хочу, чтобы подстраницы тоже были интерактивными). Но я изо всех сил пытаюсь найти примеры или информацию об этом типе архитектуры в Интернете. Это вообще сделано? Есть ли альтернативный способ справиться с такими вещами?

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

Для справки: поскольку это практика в javascript, вся информация о «базе данных» сохраняется в виде файлов js, что, я знаю, нереально, но меня это устраивает.

Маршрутизатор React — это то, что вы ищете: https://reactrouter.com/web/guides/quick-start После установки вы можете определять маршруты следующим образом:

 <Route exact path='/recipes' component={ListComponent} />
<Route exact path='/recipe/:id' component={DetailComponent} />
 

Таким образом, рецепт с идентификатором 1 будет находиться в /recipe/1