javascript - 在 Next JS 中不触发页面更改事件的情况下更新路由器查询

Question

我想在 Next JS 中更改当前页面的 URL 查询而不触发页面更改事件。 我的用例是简单地记住在日历中查看的星期，类似于 Google 日历。这是我尝试过的:

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.props.router.push 触发了 Next 中的页面更改，它导致我正在使用的页面加载栏 ( nprogress )出现在屏幕上。我试过 this.props.router.push({ query: { d } });，但没有成功。

所以我的问题是:有没有办法在没有 triggering events 的情况下更改路由器查询？ 比如 routeChangeStart(url)?

Answer 1

您可以跟踪先前的路径名并在 routeChangeStart 事件处理程序中进行条件检查以查看路径名(无需查询)是否更改:

// _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);

...

这可能不会直接回答您的问题，因为它仍会触发 Router.events，但希望可以帮助您处理您的用例。