bug: ionic react going back does not render correct view

# Bug Report

**Ionic React version:**
[ ] **4.x**
[x] **5.x**

**Current behavior:**
My app has four tabs. The second tab reuses CatalogPage component to display a tree-like structure of book catalogs. However, if I:
1. navigate to second level catalog in second tab
2. click the first tab
3. click the second tab
4. call this.props.history.goBack
, then the browser address bar URL is the first tab but the rendered page is the first level catalog in the second tab!

**Expected behavior:**
After the above step 4, then the browser address bar URL is the first tab AND the rendered page is the first tab!?

**Steps to reproduce:**
1. Setup the program:
```
git clone https://github.com/MrMYHuang/cbetar2.git
cd cbetar2
npm i
npm run start
```
2. Open http://localhost:3000/bookmarks
3. Click the second tab. The browser address bar will become http://localhost:3000/catalog
4. Click the first list item. The browser address bar will become http://localhost:3000/catalog/catalog/CBETA
5. Click the first tab. The browser address bar will become http://localhost:3000/bookmarks
6. Click the second tab. The browser address bar will become http://localhost:3000/catalog/catalog/CBETA
7. Click the top left back button. The browser address bar will become http://localhost:3000/bookmarks *BUT* the rendered page is actually the page!!!: http://localhost:3000/catalog

**Related code:**
The routes:

```
// https://github.com/MrMYHuang/cbetar2/blob/master/src/App.tsx



{/* The following route is for backward compatibility. */}
} exact={true} />
} exact={true} />
{/* The following route is for backward compatibility. */}
} exact={true} />
} exact={true} />
} exact={true} />
} exact={true} />
{/* The following route is for backward compatibility. */}
} exact={true} />
} exact={true} />
} exact={true} />
} exact={true} />
} exact={true} />
} />
{ return this.routeByQueryString(); }} exact={true} />

















```