Invalid browser history when using the same page component for different routes

[julkue]

This is a follow-up ticket of #3715.

Bug report

Describe the bug

Let's say you have a navigation like the following, with a few different routes, all handled by the same page component:

<ul>
  <li>
	<Link activeClassName='active' href={'/index'} as={'/'}>
	  <a className='nav-link home-link'>Home</a>
	</Link>
  </li>
  <li>
	<Link activeClassName='active' href={'/index'} as={'/about'}>
	  <a className='nav-link'>About</a>
	</Link>
  </li>
  <li>
	<Link activeClassName='active' href={'/index'} as={'/company'}>
	  <a className='nav-link'>Company</a>
	</Link>
  </li>
  <li>
	<Link activeClassName='active' href={'/index'} as={'/competences'}>
	  <a className='nav-link'>Competences</a>
	</Link>
  </li>
</ul>

If you then open the index page (http://localhost:3000/) and navigate from top to bottom (Home–Competences) you'd expect these navigation actions to be pushed to the browser history. But when you use the browser back button you won't get to these pages like you've clicked.

The use case is the following: I'm only having one page component as my page is rendered 100% dynamically based on backend data. And since the backend always responds in the same data structure, I only need one paragraph. So all my links are referencing to the same page component, but still with different routes.

To Reproduce

Use the following example – this is a slightly modified version of the "active-class-name" example:

active-class-name.zip

1. Extract the zip and run $ npm install && npm run dev in the extracted folder
2. Please go to http://github.com/ to push a new history entry
3. Please go to http://localhost:3000/
4. Navigate through the navigation from top to bottom
5. Then click the browser back button
   • Home (/)
   • About (/about)
   • Company (/company)
   • Competences (/competences)

=> You will notice that you won't get the history restored like you've clicked it. When you are on the last page, the competences page, and you click the browser back button, you will immediately get to the Home page (/) instead of Company (/company).

Expected behavior

When you are on the last navigated page (/competences), clicking on the browser back button should navigate you back to /company, then to /about and finally to /.
When clicking the browser back button,

Screenshots

System information

• OS: Windows 10
• Browser: Chrome & Firefox
• Version of Next.js: 6.1.1

[timneutkens]

Fixed in #4153