Блог

Я пытаюсь создать кнопку фильтра для проекта, похожего на веб-сайт электронной коммерции. Я хочу, чтобы пользователи могли использовать фильтр для сужения отображаемых результатов (например, цена, категория, размер, isBike, название продукта и т. Д.), Которые будут отображаться в URL-адресе веб-сайта (например products.com/search/priceMax=40/category=TV/isBike=true). Приведенный ниже код работает, но не будет хорошо масштабироваться по мере увеличения входных данных фильтра, потому что я хочу сгенерировать ВСЕ возможные маршруты (например.г. products.com/search/priceMax=40, products.com/search/priceMax=40/isBike=true, products.com/search/category=TV). Если я прямо не укажу эти маршруты на своем app.js файл, я просто возвращаю пустую HTML-страницу. Я также пробовал возиться с использованием / не использованием exact в маршруте, но и здесь тоже боролся.

Я понимаю, что могу (и, возможно, должен) использовать запрос POST, но ради любопытства мне было любопытно, как правильно это сделать, поскольку я не добился успеха, следуя документации для маршрутизатора react. Мне также нравится идея о том, чтобы пользователи веб-сайта могли видеть фильтр в URL-адресе, могли отправлять текущий URL-адрес в тексте или по электронной почте и т. Д.

Примечание: Мне не нужно дублировать маршруты. Например, мне не нужны два отдельных маршрута, таких как products.com/search/priceMax=40/isBike=true и products.com/search/isBike=true/priceMax=40. Достаточно того порядка, в котором они структурированы в моем исходном массиве.

Примечание.Структура моего приложения использует то, что указано в URL-адресе, для запроса базы данных и отображения результатов (например, req.запрос.цена). Единственная проблема, с которой я сталкиваюсь при таком подходе, — это создание необходимых маршрутов в моем app.js файл. Я полностью понимаю, что существуют другие способы создания фильтра, но мне бы очень хотелось помочь понять, как динамически отображать 1000 потенциальных маршрутов с помощью react-маршрутизатора (или аналогично коду грубой силы, который я собрал), если это возможно.

 import { BrowserRouter as Router, Route } from 'react-router-dom';
import AdvancedProductSearchResultsPage from './pages/AdvancedProductSearchResultsPage/AdvancedProductSearchResultsPage.component';

const App = () => {

  const filters = [
    '/price=:price',
    '/category=:category',
    '/size=:size',
    '/isBike=:isBike',
    '/productName=:productName',
  ]
  const filtersUrl = []
  for (var h = 0; h < filters.length; h  ) {
    filtersUrl.push(filters[h]);
  }
  for (var i = 0; i < filters.length - 1; i  ) {
    for (var j = i   1; j < filters.length; j  ) {
      filtersUrl.push(filters[i]   filters[j]);
    }
  }
  for (var i = 0; i < filters.length - 1; i  ) {
    for (var j = i   1; j < filters.length; j  ) {
      for (var k = j   1; k < filters.length; k  ) {
        filtersUrl.push(filters[i]   filters[j]   filters[k]);
      }
    }
  }
  for (var i = 0; i < filters.length - 1; i  ) {
    for (var j = i   1; j < filters.length; j  ) {
      for (var k = j   1; k < filters.length; k  ) {
        for (var l = k   1; l < filters.length; l  ) {
          filtersUrl.push(filters[i]   filters[j]   filters[k]   filters[l]);
        }
      }
    }
  }
  for (var i = 0; i < filters.length - 1; i  ) {
    for (var j = i   1; j < filters.length; j  ) {
      for (var k = j   1; k < filters.length; k  ) {
        for (var l = k   1; l < filters.length; l  ) {
          for (var m = l   1; m < filters.length; m  ) {
            filtersUrl.push(filters[i]   filters[j]   filters[k]   filters[l]   filters[m]);
          }
        }
      }
    }
  }

  return (
    <Router>
          {(filtersUrl) amp;amp; filtersUrl.map((items) =>
            <Route path={`/search${items}`} component={AdvancedProductSearchResultsPage} exact/>
          )}

    </Router>
  )
}

export default App;