Динамическая маршрутизация страниц в React - PullRequest
0 голосов
/ 03 июля 2019

Здравствуйте, я пытаюсь узнать React с помощью варианта использования интернет-магазина. У меня есть 200 000 предметов в базе данных, которые сгруппированы по категориям. Каждый продукт или каждая категория продукта должны быть доступны напрямую через следующую форму URL:

для продуктов:
http://domain/product_name
http://domain/product_name2
и т.д ..

для категорий (представляющих меню)
http://domain/laptops/gaming
будет отображаться
имя_продукта и имя_продукта2 и т.д ..

Поскольку категории и продукты будут добавляться / изменяться каждую ночь, компонент «Маршрутизатор» необходимо будет «заново создавать», чтобы правильно обрабатывать маршруты для новых продуктов и категорий, поскольку я не использую такие пути, как http://domain/product/product_name... Я не могу использовать статический маршрут как

путь = / продукт /: идентификатор ...

У меня есть простой PHP rest api, который возвращает тип пути
http://domain/product_name -> тип товара
http://domain/laptops/gaming -> тип секции

на основе такого api я могу правильно определить компонент, который будет использоваться для визуализации объекта, с помощью следующего кода (удален вызов API api, чтобы сделать код максимально простым)

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';
import ShowProduct from './components/showProduct.js'
import ShowSection from './components/showSection.js'

const PageLocator=({var1})=>{
        {/* determine from rest API if requested path is type of product or section

        if product */}
        return <div><ShowProduct product={var1.path} /></div>


        {/* if section */}
        return <div><ShowSection section={var1.path}

        {/* if etc...  */}
}

class App extends React.Component {


  render() {
    return(
                  <Router>
                    <div>
                        <PageLocator path="/" var1={{path:window.location.pathname}} />
                    </div>
                </Router>
    )
  }
}

Код выше действительно делает то, что я ожидаю. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу проверить правильность решения из-за своего нулевого опыта работы с React, поэтому я хотел бы попросить кого-нибудь подтвердить и в конечном итоге посоветовать, как мне справиться с таким требованием с помощью React.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...