bug: react - maximum depth exceeded from PrivateRoute

[jeffcjohnson]

Bug Report

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

Current behavior:
Redirecting from a PrivateRoute causes "Maximum update depth exceeded".

Expected behavior:
Redirect to, for example, a "/login" page.

I have been trying to use the PrivateRoute pattern described here without success.

Steps to reproduce:

ionic start ionic-react-redirect-bug conference --type=react
cd ionic-react-redirect-bug

Add the following to src/App.tsx:

interface PrivateRouteProps extends RouteProps {
  component: any;
}

const PrivateRoute = ({component: Component, ...rest}: PrivateRouteProps) => {
  const isLoggedIn = false;

  return (
    <Route
      {...rest}
      render={(routeProps) =>
        isLoggedIn ? (
          <Component {...routeProps} />
        ) : (
          <Redirect to={{pathname: "/login", state: {from: routeProps.location}}}/>
        )
      }
    />
  );
}

In src/App.tsx replace:

<Route path="/support" component={Support} />

with:

<PrivateRoute path="/support" component={Support} />

Comment out useEffect in src/components/Map.tsx if it complains about anything (unrelated to this issue).

ionic serve

Click the Support menu item.

Other information:

In the browser console:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    React 4
    unlisten react-router.js:69
    listener history.js:162
    notifyListeners history.js:180
    notifyListeners history.js:179
    setState history.js:300
    replace history.js:414
    confirmTransitionTo history.js:152
    replace history.js:397
    onUpdate react-router.js:309
    componentDidUpdate react-router.js:189
    React 6
    unstable_runWithPriority scheduler.development.js:659
    React 5
    unstable_runWithPriority scheduler.development.js:659
    React 6

Ionic info:

Ionic:

   Ionic CLI       : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.2.3

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   NodeJS : v14.4.0 (/usr/local/Cellar/node/14.4.0/bin/node)
   npm    : 6.14.6
   OS     : macOS Catalina

[elylucas]

Hi @jeffcjohnson,

We have a revamped version of ionic/react-router coming out soon that I think fixes your issue. Could you try installing a dev build of it and let us know?

npm i @ionic/react@5.3.0-dev.202007062206.b165a26 @ionic/react-router@5.3.0-dev.202007062206.b165a26

This should be a part of the 5.3 release in the next few weeks.

Thanks

[jeffcjohnson]

Hi @elylucas, thanks for the quick response.

With the dev build it works on the first click for Support but when I click it a second time it triggers a break point in the React DevTools for Firefox plugin. When I click the resume button in the debugger, then it gets the max depth error.

// --- Welcome to debugging with React DevTools ---
// This debugger statement means that you've enabled the "break on warnings" feature.
// Use the browser's Call Stack panel to step out of this override function-
// to where the original warning or error was logged.
// eslint-disable-next-line no-debugger
debugger;t.apply(void 0,o)};n.__REACT_DEVTOOLS_ORIGINAL_METHOD__=t,// $FlowFixMe property error|warn is not writable.

[elylucas]

I'm noticing that its only erroring when you go from /login to /support, so it seems to be an issue redirecting back to itself. Do you see the same?

I also noticed that it works fine if you change the Redirect from
<Redirect to={{pathname: "/login", state: {from: routeProps.location}}}/>
to
<Redirect to="/login" />

What are you trying to do setting that state?

[jeffcjohnson]

Yes, it only errors when going there from /login.

The from location is sent in order for the LoginPage to redirect back to the referring page when successfully logged in as demonstrated here.

function LoginPage() {
  let history = useHistory();
  let location = useLocation();

  let { from } = location.state || { from: { pathname: "/" } };
  let login = () => {
    fakeAuth.authenticate(() => {
      history.replace(from);
    });
  };

  return (
    <div>
      <p>You must log in to view the page at {from.pathname}</p>
      <button onClick={login}>Log in</button>
    </div>
  );
}

[elylucas]

Gotcha, thanks, taking a look into it

[elylucas]

Hi @jeffcjohnson,

I noticed passing in the routeProps.location to the state is what is seeming to cause an infinite render somewhere inside react router. This is happening because the value of location changes each render. Are you able to pull off just the pathname from location, instead of passing the whole object?:

<Redirect to={{pathname: "/login", state: {from: routeProps.location.pathname}}}/>

[jeffcjohnson]

I tried this in App.tsx which stopped the error:

<Redirect to={{pathname: "/login", state: {from: {pathname: routeProps.location.pathname}}}}/>

And this in Login.tsx:

interface MyLocationState {
  from: {pathname: string};
}

...

  const location = useLocation<MyLocationState>();
  const { from } = location.state || { from: { pathname: "/" } };
  console.log("from:", from);

  const login = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormSubmitted(true);
    await setIsLoggedIn(true);
    await setUsernameAction(username);
    history.replace(from);
    // history.push('/tabs/schedule', {direction: 'none'});
  };

But as seen from the log, the value is overwritten so the redirect won't work:

from:  Object { pathname: "/" } Login.tsx:31
from:  Object { pathname: "/support" } Login.tsx:31
from:  Object { pathname: "/login" } Login.tsx:31