How to update router query in Next JS without triggering a page change event

Question

How to update router query in Next JS without triggering a page change event

I am seeking a solution to modify a URL query for the current page in Next JS without causing the page change event to trigger. Specifically, I need to be able to remember the week that is being viewed in a calendar, much like how Google Calendar operates. Here's what I have attempted so far:

import Calendar from '../components/Calendar'
import { formatDate } from '../utils'

class CalendarDashboardPage extends React.Component {
  refreshQuery(date) {
    const { pathname, asPath } = this.props.router
    const d = formatDate(date) // YYYY-MM-DD
    this.props.router.push(pathname, asPath, { query: { d }, shallow: true })
  }

  render() {
    return <Calendar onDateChange={this.refreshQuery) />
  }
}

export default withRouter(CalendarDashboardPage)

While my approach appears to be functional, using this.props.router.push triggers a page change in Next JS, which inadvertently displays the loading bar implemented (nprogress). In an attempt to resolve this issue, I experimented with

this.props.router.push({ query: { d } });

, but it did not produce the desired outcome.

Hence, my inquiry lies in finding out if there exists a method to adjust the router query without initiating events like routeChangeStart(url)?

javascript next.js

Answer 1

Answer №1

If you want to monitor changes in the previous pathname and perform a conditional check within the routeChangeStart event handler, you can accomplish this by:

// _app.js

import Router from "next/router";

let previousPathname = null;

function handleRouteChange(url) {
  const pathname = url.split('?')[0];
  if (previousPathname && previousPathname !== pathname) {
    console.log(`App is changing from ${previousPathname} to ${pathname}...`);
  }
  previousPathname = pathname;
};

Router.events.on("routeChangeStart", handleRouteChange);

...

This approach may not directly solve your query as it will still trigger Router.events, but it could be beneficial for your specific scenario.

Answer 2

If you want to monitor changes in the previous pathname and perform a conditional check within the routeChangeStart event handler, you can accomplish this by:

// _app.js

import Router from "next/router";

let previousPathname = null;

function handleRouteChange(url) {
  const pathname = url.split('?')[0];
  if (previousPathname && previousPathname !== pathname) {
    console.log(`App is changing from ${previousPathname} to ${pathname}...`);
  }
  previousPathname = pathname;
};

Router.events.on("routeChangeStart", handleRouteChange);

...

This approach may not directly solve your query as it will still trigger Router.events, but it could be beneficial for your specific scenario.

Answer 3

Answer №2

Unfortunately, it seems that changing the URL in the browser without reloading the page is not possible (as far as I know).

In order to accomplish this task, you will need to work within a single page application.

You may have to switch from using next/router to utilizing react-router. Check out this helpful article for more information on creating a single page application with next using react router.

Once you have made the transition, you can use

this.props.history.push("/new/url")

with the react router feature to achieve the desired functionality.

I hope this explanation is useful to you.

Answer 4

Unfortunately, it seems that changing the URL in the browser without reloading the page is not possible (as far as I know).

In order to accomplish this task, you will need to work within a single page application.

You may have to switch from using next/router to utilizing react-router. Check out this helpful article for more information on creating a single page application with next using react router.

Once you have made the transition, you can use

this.props.history.push("/new/url")

with the react router feature to achieve the desired functionality.

I hope this explanation is useful to you.

Answer 5

Answer №3

I found a simple solution by utilizing the browser's API.

updateDateQuery(date) {
  const formattedDate = formatDate(date); 
  window.history.pushState('', '', `?d=${formattedDate}`)
}

This code snippet updates the date parameter in the URL as users navigate through the calendar. It can then be accessed using componentDidMount() for refreshing or sharing the URL.

Answer 6

I found a simple solution by utilizing the browser's API.

updateDateQuery(date) {
  const formattedDate = formatDate(date); 
  window.history.pushState('', '', `?d=${formattedDate}`)
}

This code snippet updates the date parameter in the URL as users navigate through the calendar. It can then be accessed using componentDidMount() for refreshing or sharing the URL.

How to update router query in Next JS without triggering a page change event

Answer №1

Answer №2

Answer №3

Similar questions

Interacting with the header component within the renderHeader property of the MUI Data Grid Pro will update the sortModel

Enhance Your NextJs Website with Interactive Tooltips using @tippyjs/react

Issue: It seems like there is an error with using functions as a React child. Uncertain about the exact location

Show data based on the chosen destination

Is it possible for two node scripts running on the same machine to interfere with each other's execution

Customizing the appearance of React Navigation StackNavigator through background color changes and styling

Do I have to additionally check the data type using typeof when implementing PropTypes in my code?

Integrating threejs dynamically into a Create React App environment

Toggle button with v-bind in Nativescript Vue

A guide to testing window.pageYoffset in webdriverIO using chai assertions

Send two arguments to a personalized validation function using express-validation

Retrieving the maximum number and its corresponding name from an object using JavaScript

When using NodeJS, having multiple 'if' statements may result in conflicting headers being returned,

The information returned to the callback function in Angular comes back null

TS: How can we determine the type of the returned object based on the argument property?

Ways to exchange information among Vue components?

Invoking a Node.js function using a URL reference

The disappearance of hashtag (#) when passed as req.query in the backend has been observed

Angular is having trouble with binding

Angular does not delay for promises to settle