Bugfix - Prevent back button loop on Artist / Collector pages #1325
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
You cannot currently navigate back from an artist's / collector's page if they have an alias name. This can be replicated by clicking on any profile name on the homepage (or any other page) and then hitting the back button. You will stay on that individual's profile no matter how many times you press the back button. This is because of some bad interactions between React Router and the way history is stored.
In the
Displaycomponent,componentWillMountcallsonReady, which involves pushing the active URL to the page history. However, downstream code also changes the URL of the page to include the alias (ex. to/tezzardz_gone_wildfrom/tz/tz2PTETyPeF48fwbYNckycFGvrMye6YnDrnm), which causes React Router to see this as navigation to a new page. Because of this, the component is remounted andcomponentWillMountis called again. This ends up adding another instance of the artist's / collector's profile to your page history -- meaning on every page load this is thrown in there twice.If you hit the back button, it flips you from the alias page to the tz/... format, which remounts the component and pushes to the history again. Because of this, you are never able to back out of an artist's page.
This PR registers the alias and tz/... routes as the same route to prevent React Router from attempting to remount when flipping between these URLs. No visual changes or functionality changes occur, other than the back button working. In an attempt to keep this PR as small and legible as possible, I have not edited the code that involves both the alias and the tz/... format being pushed to page history, so it does still take hitting the back button twice to leave a page.