在 Next JS 中更新路由器查询而不触发页面更改事件

Question

I want to change a URL query for the current page in Next JS without triggering the page change event. My use case is to simply remember the week being viewed in a calendar, similar to Google Calendar . Here's what I've tried:

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)

This almost seems to work OK, but because this.props.router.push triggers a page change in Next, it causes the page loading bar that I'm using ( nprogress ) to appear on screen. I've tried this.props.router.push({ query: { d } }); , but no luck.

So my question: is there any way to change the router query without triggering events such as routeChangeStart(url) ?

Answer 1

You can keep track of the previous pathname and do a conditional check in the routeChangeStart event handler to see if the pathname(without query) changes:

// _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 may not answer your question directly since it will still trigger Router.events but hopefully can help you with your use case.

Answer 2

Short version: you can't (at least AFAIK).

The first requirement to change the URL in the browser without reload the page is to do that in a single page application.

To achieve I'm afraid you need to drop next/router and start to use react-router , in this article you can find details about how to do a SPA with next using react router.

Once you have done, with this.props.history.push("/new/url") react router feature you can do what you are looking for.

Hope this helps.

Answer 3

My solution was to just use the browser's API.

refreshQuery(date) {
  const dateString = formatDate(date) // YYYY-MM-DD
  window.history.pushState('', '', `?d=${dateString}`)
}

This changes the date URL parameter when the user flips through the calendar, which can be snagged by componentDidMount() when the users refreshes/shares the URL.