Ionic-framework: bug: [ionic-react] Route change trigger url change, but doesn't render

[florianchevallier]

Bug Report

Ionic version:

[x] @ionic/react: "^5.0.4",
[x] @ionic/react-router: "^5.0.4"

Current behavior:
Despite changing the URL, the view doesn't rerender.
Another error is that I never go to useIonViewDidEnter. I have this in the Home page :

  useIonViewDidEnter(() => {
    console.log('hoooho')
  })

But the log never show up.

Here is a short video of the bug.

Expected behavior:
I wish it would change page without any problem.

Steps to reproduce:
You can :

git clone https://github.com/florianchevallier/ionic-react-test
cd ionic-react-test
npm i
ionic serve

Click on the "Pokedex" Button on the home page

Related code:

The router : https://github.com/florianchevallier/ionic-react-test/blob/master/src/App.tsx
The Home Page : https://github.com/florianchevallier/ionic-react-test/blob/master/src/pages/Home/Home.tsx

Ionic info:

Ionic:

   Ionic CLI       : 6.2.0 (/Users/florianchevallier/.nvm/versions/node/v12.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.0.4

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.1 (/Users/florianchevallier/.nvm/versions/node/v12.13.1/bin/node)
   npm    : 6.12.1
   OS     : macOS Catalina

[florianchevallier]

After doing some investigations, replacing the IonRouterOutlet with a Switch from react-router-dom, all seems to work.

[artfurma]

I'm experiencing a similar issue when redirecting from a private path. The redirection happens, but the page is completely blank. What's interesting is that even though the page is blank, under inspect I can see all the DOM elements being present in the tree.

as @florianchevallier mentioned, using a Switch instead of IonRouterOutlet seems to have solved the issue - the navigation animations are now gone though.

The relevant code:

App.tsx

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/login" component={LoginPage} />
          <Route path="/offices" component={OfficeListPage} />

          <PrivateRoute path="/projects">
            <ProjectListPage />
          </PrivateRoute>

          <Route path="/" render={() => <Redirect to="/projects" />} exact />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

PrivateRoute.tsx

const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, ...props }: PrivateRouteProps) => {
  const [authStatus, setAuthStatus] = useState<null | boolean>(null);

  useEffect(() => {
    setTimeout(() => {
      setAuthStatus(true); // Simulate API request for fetching auth token from Capacitor Storage
    }, 500);
  }, [authStatus]);

  return (
    <Route
      {...props}
      render={({ location }) =>
        isNil(authStatus) ? ( // pending status
          <LoadingPage /> 
        ) : authStatus === true ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: location },
            }}
          />
        )
      }
    />
  );
};

Thanks in advance for the help,
Artur

[TaylorClay]

Just to throw it out there, in my case, I was not able to simply replace the IonRouterOutlet with Switch. I had to nest Switch within IonRouterOutlet.

Without the presence of IonRouterOutlet, I received the error:

Error: IonTabs must contain an IonRouterOutlet

See snippet below.

<IonRouterOutlet>
  <Switch>
    <Route path="/tab1" component={Tab1} />
    <Route path="/tab2" component={Tab2} />
    <Route path="/tab3" component={Tab3} />
    <Redirect exact from="/" to="/tab1" />
  </Switch>
  <Route path="/tab2/details" component={Details} />
</IonRouterOutlet>

UPDATE: Also found out my nested path (/tab2/details as seen above) didn't work under the Switch, I had to move it outside so it was siblings with Switch

[ntarricone]

Replacing IonRouterOutlet for Switch seems to have fixed the issue for me. However I´m not using tabs...

I wonder why is this happening... Because I´m doing another route change and it was working with the IonRouterOutlet

[saviilsy]

Same problem here. Nesting <Switch> element inside <IonRouterOutlet> did work. Using it <IonSplitPane>. And as noted above, change animations are gone and annoying "flicker" effect happens when switching between pages.

Edit: proper format to show tags in comment.

[MrWillTurner]

I also bumped into the same problem.
I use tabs and a component with onClick=history.push('/page/1).
Initially, this component didn't render the new page when I clicked on it (like in the video).
I then added the <Switch> element inside <IonRouterOutlet> and this workes but, when I click on 2 tabs, the browser stops rendering the pages.

[elylucas]

Hi @florianchevallier

Sorry about the delay in taking a look at this.

I checked out your repo, and it seems the issue when using the IonRouterOutlet is that your pages didn't have a IonPage as their main component. Each page in a outlet needs to have the IonPage as its parent.

Also, there seems to be some duplication of IonContent tags in your pages (some in the page, and some in the layout), there should only be one IonContent per page.

Going to close this as it doesn't seem as the original issue is a bug in the framework.

For the others on the thread, if the above doesn't help, please open a new issue and provide a reproduction of the issue in a github repo.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.