Это скорее концептуальный вопрос, я пытаюсь отразить функциональность некоторых провайдеров электронной коммерции, таких как BigCommerce и Shopify.
Представьте, что есть компонент <Category />, который отображает страницу покупок.<Items />, а также отдельный компонент <Page />, который отображает контент, который можно редактировать с помощью редактора CMS WISYWIG.Это два основных типа компонентов в приложении.
Электронная коммерция CMS и даже CMS, такие как WordPress, часто позволяют пользователям создавать новые категории и простые информационные страницы, и обычно вы можете определить иизмените URL-маршрут для этих конкретных компонентов.
Обычно при создании приложения React с React-Router все маршруты определяются на статической основе и фактически не меняются между перезагрузками приложения.
Мне интересно, есть ли способ динамически направлять приложение к различным компонентам, БЕЗ использования параметров - вот что я имею в виду:
Допустим, существует конечная точка, содержащаянекоторый JSON, который содержал маршруты и компоненты, и пользователь мог добавлять новые / редактировать URL-адреса с помощью CMS.
[
{
"url": "/shoes",
"name": "Shoes",
"pageType": "Category"
},
{
"url": "/items",
"name": "Other Items",
"pageType": "Category"
},
{
"url": "/about-us",
"name": "About Us",
"pageType": "Page"
}
]
Чтобы использовать этот JSON, я бы создал компонент такого типа, который собирает маршрутизатординамически маршрутизирует при загрузке страницы.
import React, { Component } from "React";
import Category from "./components/Category";
import Page from "./components/Page";
import LoadingPage from "./components/LoadingPage"
const ComponentMap = {
"Category": Category,
"Page": Page
}
class DynamicApp extends Component {
state = {
loaded: false,
routes: null
}
async componentDidMount() {
const routes = await fetch('/getMyDynamicRoutes');
this.setState({
loaded: true,
routes
})
}
renderRoutes = () => {
return this.state.routes.map(route => {
const Component = ComponentMap[route.pageType];
return <Route path={route.url} render={(props) => <Component {...props} name={route.name} />} />
})
}
renderApp = () => {
return (
<Router>
{this.renderRoutes()}
</Router>
)
}
render() {
return(
{(this.state.loaded) ? this.renderApp() : <LoadingPage />}
)
}
}
Тем не менее, большая проблема, о которой я думаю, заключается в том, что приложению всегда понадобится обратный переход к API после загрузки начального приложения реакции, которое выглядиточень плохо для производительности.Например, что если я захочу связать друга с /shoes, чтобы показать ему эту категорию в определенном магазине?
Он не отправит его на эту страницу мгновенно, ему нужно будет сестьна странице загрузки, пока не будет запрошена конечная точка и не будет создан маршрутизатор.
Можно ли обработать это в Express, в универсальном маршруте, который отправляет пакет React?В этом случае мне нужно будет запрашивать БД каждый раз, когда загружается мое приложение, и это также кажется не слишком хорошим для производительности, требующим какого-то решения для кэширования.SSR лучше для такого рода вещей?