Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

document.title not updated in Router.onRouteChangeComplete #4044

Closed
clickblipclick opened this issue Mar 22, 2018 · 4 comments
Closed

document.title not updated in Router.onRouteChangeComplete #4044

clickblipclick opened this issue Mar 22, 2018 · 4 comments
Assignees
@ijjk

Comments

@clickblipclick
Copy link

  • [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I expect that in the handler for the Router.onRouteChangeComplete event, document.title would be the title of the new page that was navigated to.

Current Behavior

document.title is still the title of the previous page onRouteChangeComplete

Steps to Reproduce (for bugs)

Example: https://create-next-example-app-qyxwpdeqzb.now.sh/

Please note that the pages here are wrapped with the following layout component:

import React, { Component } from "react";
import Router from 'next/router';
import Head from "../components/head";

class Page extends Component {
  constructor(props) {
    super(props);
    this.state = { title: null };
  }
  componentDidMount() {
    Router.onRouteChangeComplete = (data) => {
      this.setState({ title: document.title });
    };
  }
  render() {
    return <div>
      <Head title={this.props.title} />
      <div class="page-title"><strong>Page title (this.props.title):</strong> {this.props.title}</div>
      <div class="page-title"><strong>Page title (onRouteChangeComplete):</strong> {this.state.title}</div>
      <div class="content">{this.props.children}</div>
    </div>
  }
}

export default Page;

Context

I have been trying to add tracking analytics in onRouteChangeComplete, but because the title is inaccurate, my analytics are incorrect.

Your Environment

Tech Version
next 5.0.0
node 8.2.1
OS Mac OS X
browser Chrome
@pddigital
Copy link

I'm having the same issue. Thanks for posting.

I think there's an issue with Router.onRouteChangeComplete for Next 5 --- it's not firing when params change for the route (while the page is the same).

This does create problems for my analytics. I do not believe it was a problem before 5?

@pddigital pddigital mentioned this issue Mar 26, 2018
Closed
@awdsawdsawds awdsawdsawds mentioned this issue Aug 3, 2018
Closed
@VatNan
Copy link

VatNan commented Aug 3, 2018 •
edited
Loading

I'm having the same issue. It' effect to google analytic detect title of document.

@pddigital
Copy link

pddigital commented Aug 3, 2018 •
edited
Loading

You do have to explicitly pass in the title. Even outside of the context of Next, this is an issue with Browser History where the order of events firing is not going to pick up the new title. I use tag manager now, I actually bypass the History Change trigger in GTM and created my own inside a business logic HOC:

Router.onRouteChangeComplete = (url) => { dataLayer.push({event: 'historyChangeForNextJS', nextTitle: this.props.title}) };

Works great....

@HaNdTriX HaNdTriX mentioned this issue Aug 8, 2018
Closed
@SBoudrias SBoudrias mentioned this issue Aug 30, 2018
Closed
@dandrei dandrei mentioned this issue Jan 10, 2019
Closed
@ijjk
Copy link
Member

ijjk commented Mar 16, 2019

Looks like this is the same as #6025 Closing in favor of that one.

@ijjk ijjk closed this as completed Mar 16, 2019
@lock lock bot locked as resolved and limited conversation to collaborators Mar 17, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@ijjk ijjk

Labels
None yet
Projects
None yet
Milestone
No milestone
5 participants
@clickblipclick @timneutkens @pddigital @VatNan @ijjk