Next.js маршрутизатор создает строку запроса и массив строк запроса

#reactjs #routes #next.js #next-router

#reactjs #маршруты #next.js #далее -маршрутизатор

Вопрос:

Я использую Next.js в моем проекте, и мне нужно создать динамическую строку запроса. Я использую этот код:

 const createQuery = (filter) => {
  let currentPath = router.pathname;
  let filterSize = Object.keys(filter).length;

  filterSize != 0 ? (currentPath  = "?") : null;

  Object.keys(filter).map(function (key, index) {
    currentPath  =
      key   "="   filter[key]   (index === filterSize - 1 ? "" : "amp;");
  });

  router.push(currentPath);
};
 

Это работает, но я не отправляю массив в строку запроса. Как я могу это сделать? Кроме того, существует ли более простой способ создания строки запроса в Next.js ?

Ответ №1:

Вы можете использовать URLSearchParams для упрощения вашего кода

 const params = new URLSearchParams({
  var1: "value",
  var2: "value2",
  arr: "foo",
});
console.log(params.toString());
//Prints "var1=valueamp;var2=value2amp;arr=foo"
 

Ответ №2:

Вы можете легко передавать динамические строки запроса с помощью nextjs / router

Router.push принимает query как объект, который будет преобразован в параметры запроса.

например:

  Router.push({
  pathname: currentPath,
  query: {
     page: 1,
     skip: 10
  }
})
// results into currentPath?page=1amp;skip=10