Изменить URl без ссылки на страницу sh NEXT. JS - PullRequest
Новая
       6

Изменить URl без ссылки на страницу sh NEXT. JS

0 голосов
/ 11 июля 2020

Я разрабатываю интернет-магазин, используя NEXT.JS и Redux. Итак, на странице списка продуктов у меня есть раскрывающийся список выбора сортировки с Price Low to High, Price High to Low и New Arrivals. Выбрав эту опцию, я хочу изменить URL-адрес без обновления страницы sh, и должен произойти вызов API. Я попытался использовать приведенный ниже код, но он не работает, и страница перезагружается. 

function sortBy(value) {
    router.replace({
        pathname: '/products/'+slug,
        query: { sort: value }
    })

    dispatch(fetchproducts(slug, sort));
}

Приведенный выше код просто обновляет sh текущую страницу и добавляет параметр sort к URL-адресу.

Так можно ли сделать это без обновления страницы sh как в Flipkart.

1 Ответ

2 голосов
/ 11 июля 2020

С помощью shallow-routing возможно изменение URL без перезагрузки страницы. Его можно включить, передав явный объект параметра в качестве третьего аргумента в Router.push, т.е. { shallow: true }

Из docs

Мелкая маршрутизация позволяет вам измените URL-адрес без повторного запуска методов выборки данных, включая getServerSideProps, getStaticProps и getInitialProps.

. Вы получите обновленные pathname и query через router объект (добавлен useRouter или withRouter) без потери состояния.

Например, вот как вы бы обновили параметр запроса sortBy для пути /products с помощью shallow-routing. 

Router.push({
  pathname: '/products',
  query: { sortBy: 'price' }
}, 
undefined, { shallow: true }
)

Но есть несколько предостережений Невозможно использовать shallow-routing между разными страницами, это работает только для изменений URL одной и той же страницы. См. Подробности в разделе caveat .

Например, вы можете обновить параметр запроса для страницы /product page, но это будет невозможно, если вы попытаетесь сделать shallow-routing от /product до /product/[slug], потому что это две разные страницы. 

// page will reload because shallow-routing not possible between the pages
Router.push('/product', '/product/some-product?sortBy=price', { shallow: true })
...