Javascript — Далее Js Shallow Routing не обновляет объект запроса при обновлении URL с новыми параметрами

Далее Js Shallow Routing не обновляет объект запроса при обновлении URL с новыми параметрами

Структура папки: —

**next-sp/pages/search/[country]/[locality].js** // Router pathname: "/search/[country]/[locality]" onclick event:- const currentCounter = this.props.router.query.counter ? parseInt(this.props.router.query.counter) : 0; const href = `/search/country/locality?counter=${currentCounter   1}{amp}amp;hh=50`; router.push(router.pathname, href, { shallow: true }); 

Но после обновления URL asPath обновляется, но объект запроса не обновляется со счетчиком и hh со значениями. введите описание изображения здесь

§

Я использую nextjs для моего приложения. При обновлении параметров запроса страницы страница должна быть перерисована. По какой-то причине это не радует. В некоторой онлайн-статье предлагается, чтобы мы получили новые реквизиты запросов в componentWillReceiveProps, но этого тоже не происходит. Нужна помощь.

/ —— modules / my-component.js —— /

 import { Component } from 'react' import Router from 'next/router' class MyComponent extends Component { someEvent = () ={amp}gt; { Router.push({ pathname: '/logs', query: { keyword: 'blah' } }) } render(){ return ( {amp}lt;div onClick={this.someEvent}{amp}gt;Click Me{amp}lt;/div{amp}gt; ) } } export default MyComponent 

/ —— pages / logs.js —— /

 import { Component } from 'react' import { withRouter } from 'next/router' import MyComponent from '~/modules/my-component' import Router from 'next/router' class Logs extends Component { componentWillUpdate(props){ //does not get printed console.log("================componentWillUpdate", this.props.router.query) } componentWillReceiveProps(props){ //does not get printed console.log("================componentWillReceiveProps", this.props.router.query) } render(){ return ( {amp}lt;div{amp}gt; {amp}lt;div{amp}gt;My Logs page{amp}lt;/div{amp}gt; {amp}lt;MyComponent /{amp}gt; {amp}lt;/div{amp}gt; ) } } export default withRouter(Logs) 

прежде всего я вижу что-то странное с вашей someEvent = keyword ={amp}gt; { . Это реальный код или пример, который вы создали для SO?

Потому что если вы называете это так: {amp}lt;div onClick={this.someEvent}{amp}gt;Click Me{amp}lt;/div{amp}gt; , тогда keyword будет фактически событием, а не ключевым словом.

Также кажется, что вы нигде не ссылаетесь на props в вашем JSX для компонента Logs . Вы должны попытаться сослаться на это.

В-третьих, каков вызов withRouter(Logs) ? Это не стандартно. По умолчанию в Next.js вы должны экспортировать компонент по умолчанию.

Вы используете нестандартный маршрутизатор? Если это так, то, скорее всего, он не будет работать с функциями в 'next/router' . Next.js, который поставляется с собственным роутером.

Попробуйте экспортировать компонент по умолчанию и убедитесь, что keyword является фактическим ключевым словом, а не событием.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector