ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

bug: Ionic React allows navigation to exact same page #20830

Open liamdebeasi opened 4 years ago

liamdebeasi commented 4 years ago

Bug Report

Ionic version:

[x] 5.x

Current behavior:

When on page /foo and trying to navigate to page /foo again, Ionic React will perform a nav transition to take you to /foo.

Expected behavior:

The current behavior is not consistent with what happens in Ionic Angular. Attempting to navigate from /foo to /foo should not perform any nav transition as it is trying to navigate to the exact same page.

Steps to reproduce:

Download the repo: https://github.com/liamdebeasi/ionic-react-same-page-bug

  1. Run the app in the react directory.
  2. Click the ion-button. You should be navigated from /home to /home again.
  3. Run the app in the angular directory.
  4. Click the ion-button. You should not be navigated from /home to /home again.

In the case of /pageone/:id routing, I would expect Ionic React to navigate to the same page as long as :id was different. For example, I would expect /pageone/1 --> /pageone/2 to work, but I would not expect /pageone/1 --> /pageone/1 to work.

Ionic info:

Ionic:

   Ionic CLI       : 6.2.2 (/Users/liamdebeasi/.nvm/versions/node/v10.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.0.5

Capacitor:

   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1

Utility:

   cordova-res (update available: 0.10.0) : 0.6.0
   native-run (update available: 0.3.0)   : 0.2.7

System:

   NodeJS : v10.15.0 (/Users/liamdebeasi/.nvm/versions/node/v10.15.0/bin/node)
   npm    : 6.9.2
   OS     : macOS Catalina
errnaa commented 4 years ago

In the case of /pageone/:id routing, I would expect Ionic React to navigate to the same page as long as :id was different.

Wouldn't it make more sense to inherit react-router's behavior?:

  1. /pageone => /pagetwo remounts component
  2. /pageone/1 => /pageone/2 reuses component
  3. /pageone/1 with key:1 => /pageone/2 with key:2 remounts component

There are things you wouldn't be able to do if 2. remounts component. For example, routing similar to Google Maps would be impossible to do.