🐛 Bug Report: Entity page tab navigation duplicates url path parameters

[awsjim]

📜 Description

Using Backstage 1.20.3, navigation across entity page tabs is not working as expected.

The URL is appending duplicate paths instead of replacing/updating the path. The user experience is that the first tab navigation works as expected, but subsequent tab changes do not result in the expected UI navigation changes.

👍 Expected behavior

Navigate the user to the tab UI that they have selected and present relevant information

👎 Actual Behavior with Screenshots

Navigation across tabs fails and the URL is not updated as expected

👟 Reproduction steps

Install a new 1.20.x Backstage

1. BACKSTAGE_APP_NAME=backstage npx -y -q @backstage/create-app@0.5.7 --path ./backstage_1.20

Change to the new directory and start the local instance

2. cd backstage_1.20
3. yarn dev

In the Backstage UI, reproduce the navigation behavior

4. Select an entity that has multiple tabs on the Entity Page (e.g. 'example-website')
5. Select one of the available tabs. Navigation works as expected; however, the URL includes a duplicated path entry
6. Select another tab. Navigation to the selected tab does not occur. The URL is appended with duplicated identifiers for the selected tab.

📃 Provide the context for the Bug.

This behavior is preventing users from easily browsing the available entity information. They have to navigation to another page and then back into an Entity Page to access the data that they need.

🖥️ Your Environment

yarn run v1.22.21
$ $HOME/tmp/backstage_1.20/node_modules/.bin/backstage-cli info
OS:   Darwin 23.1.0 - darwin/arm64
node: v18.18.2
yarn: 1.22.21
cli:  0.24.0 (installed)
backstage:  1.20.0

Dependencies:
  @backstage/app-defaults                                          1.4.5
  @backstage/backend-app-api                                       0.5.8
  @backstage/backend-common                                        0.19.9
  @backstage/backend-dev-utils                                     0.1.2
  @backstage/backend-openapi-utils                                 0.1.0
  @backstage/backend-plugin-api                                    0.6.7
  @backstage/backend-tasks                                         0.5.12
  @backstage/catalog-client                                        1.4.6
  @backstage/catalog-model                                         1.4.3
  @backstage/cli-common                                            0.1.13
  @backstage/cli-node                                              0.2.0
  @backstage/cli                                                   0.24.0
  @backstage/config-loader                                         1.5.3
  @backstage/config                                                1.1.1
  @backstage/core-app-api                                          1.11.1
  @backstage/core-components                                       0.13.8
  @backstage/core-plugin-api                                       1.8.0
  @backstage/e2e-test-utils                                        0.1.0
  @backstage/errors                                                1.2.3
  @backstage/eslint-plugin                                         0.1.3
  @backstage/frontend-plugin-api                                   0.3.0
  @backstage/integration-aws-node                                  0.1.8
  @backstage/integration-react                                     1.1.21
  @backstage/integration                                           1.7.2
  @backstage/plugin-api-docs                                       0.10.1
  @backstage/plugin-app-backend                                    0.3.55
  @backstage/plugin-app-node                                       0.1.7
  @backstage/plugin-auth-backend-module-gcp-iap-provider           0.2.1
  @backstage/plugin-auth-backend-module-github-provider            0.1.4
  @backstage/plugin-auth-backend-module-gitlab-provider            0.1.4
  @backstage/plugin-auth-backend-module-google-provider            0.1.4
  @backstage/plugin-auth-backend-module-oauth2-provider            0.1.4
  @backstage/plugin-auth-backend                                   0.20.0
  @backstage/plugin-auth-node                                      0.4.1
  @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.4
  @backstage/plugin-catalog-backend                                1.15.0
  @backstage/plugin-catalog-common                                 1.0.18
  @backstage/plugin-catalog-graph                                  0.3.1
  @backstage/plugin-catalog-import                                 0.10.3
  @backstage/plugin-catalog-node                                   1.5.0
  @backstage/plugin-catalog-react                                  1.9.1
  @backstage/plugin-catalog                                        1.15.1
  @backstage/plugin-events-node                                    0.2.16
  @backstage/plugin-github-actions                                 0.6.8
  @backstage/plugin-org                                            0.6.17
  @backstage/plugin-permission-common                              0.7.10
  @backstage/plugin-permission-node                                0.7.18
  @backstage/plugin-permission-react                               0.4.17
  @backstage/plugin-proxy-backend                                  0.4.5
  @backstage/plugin-scaffolder-backend                             1.19.1
  @backstage/plugin-scaffolder-common                              1.4.3
  @backstage/plugin-scaffolder-node                                0.2.8
  @backstage/plugin-scaffolder-react                               1.6.1
  @backstage/plugin-scaffolder                                     1.16.1
  @backstage/plugin-search-backend-module-catalog                  0.1.11
  @backstage/plugin-search-backend-module-pg                       0.5.16
  @backstage/plugin-search-backend-module-techdocs                 0.1.11
  @backstage/plugin-search-backend-node                            1.2.11
  @backstage/plugin-search-backend                                 1.4.7
  @backstage/plugin-search-common                                  1.2.8
  @backstage/plugin-search-react                                   1.7.3
  @backstage/plugin-search                                         1.4.3
  @backstage/plugin-tech-radar                                     0.6.10
  @backstage/plugin-techdocs-backend                               1.9.0
  @backstage/plugin-techdocs-module-addons-contrib                 1.1.2
  @backstage/plugin-techdocs-node                                  1.10.0
  @backstage/plugin-techdocs-react                                 1.1.13
  @backstage/plugin-techdocs                                       1.9.1
  @backstage/plugin-user-settings                                  0.7.13
  @backstage/release-manifests                                     0.0.11
  @backstage/test-utils                                            1.4.5
  @backstage/theme                                                 0.4.4
  @backstage/types                                                 1.1.1
  @backstage/version-bridge                                        1.0.7
Done in 0.62s.

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

No, I don't have time to work on this right now

[camilaibs]

Hi, thanks for opening the issue 🙌🏻
Could you please create a reproduction repository and share the link here? We couldn't replicate it on the demo site. Also, could you confirm which Browser you are using?

[djflocko]

We have the same issue (tested browsers: Firefox, Chrome, Safari).
Upgrade path was 1.19.x to 1.20.3

[awanlin]

OK, I can reproduce using the steps mentioned more or less. I just did npx @backstage/create-app@0.5.7 and then gave it a name. This also happens using npx @backstage/create-app@latest which is what is in the docs every where and as of right now would get you 0.5.7 as well.

The Demo site is on 1.21.0-next.1 which is the newest weekly release. Not sure what changed between 🤔

[awanlin]

As a temporary fix adding this to the root package.json resolutions fixed the issue for me:

"resolutions": {
    "react-router": "6.19.0",
    "react-router-dom": "6.19.0"
  },

[awsjim]

Nice! Can confirm the temporary fix from @awanlin worked for me too 🥇
Thanks 🙏

[awanlin]

So the thinking is that this is the issue: remix-run/react-router#11052

We'll keep an eye on this, when that happens this should begin to work again

[kimsagro1]

@awanlin they have closed the bug as won't fix

[chinfeng]

remix-run/react-router#11063

[dheerajkabra]

For the beginners like me, below might help:
Post making changes in package.json as suggested by @awanlin , I had to run yarn install and then it worked.
Thanks.

[awanlin]

Thanks for the heads up @kimsagro1 and for starting the discussion on this @chinfeng 🚀

[javaface]

As a temporary fix adding this to the root package.json resolutions fixed the issue for me:

"resolutions": {
    "react-router": "6.19.0",
    "react-router-dom": "6.19.0"
  },

@awsjim Thanks for reporting. Love to know how to make screenshots like that.
@awanlin Thanks for sharing a temporary work around.

To elaborate on this temporary fix a bit ...
In the root package.json (this is the one in your Backstage app. top level dir.) on the root package in the file, replace

"resolutions": {
    "@types/react": "^17",
    "@types/react-dom": "^17"
  },

with

"resolutions": {
    "react-router": "6.19.0",
    "react-router-dom": "6.19.0"
  },

Afterwards, run yarn install. Note: your yarn.lock file will get updated by yarn. Typically, you do not want to edit your yarn.lock file manually.

[awanlin]

Just want to clarify that it's not replace, but I can agree that my comment was perhaps unclear as I was trying to get information out quickly at the time. If you have a resolutions section already then you want to add to it, in the example above you may have reasons to have resolutions for @types/react and @types/react-dom so replacing those may cause you issues. Generally speaking resolutions should be something you use for a short period of time and then remove.

[javaface]

Just want to clarify that it's not replace, but I can agree that my comment was perhaps unclear as I was trying to get information out quickly at the time. If you have a resolutions section already then you want to add to it, in the example above you may have reasons to have resolutions for @types/react and @types/react-dom so replacing those may cause you issues. Generally speaking resolutions should be something you use for a short period of time and then remove.

@awanlin Thanks again. I'll add what I replaced back in and test. Note that replacing them did fix the problem for me though so I'm thankful for this Bug Report and the well timed information it provides.

[tudi2d]

Seems like this has been fixed in the v6.20.1 release of react-router! 🎉 https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6201.

[spantaleev]

I can confirm that upgrading react-router to v6.20.1 fixes this routing issue.

[freben]

Excellent. Thanks for reporting back, let's close this issue for now then.