[v6] Cannot update a component from inside the function body of a different component.

[ellisio]

I'm tinkering with the v6 Alpha release and am running into the following console warning (see facebook/react#18178 for more information):

index.js:1 Warning: Cannot update a component from inside the function body of a different component.
    in Navigate (at Authenticated.js:27)
    in Unknown (at App.js:26)
    in Route (at App.js:26)
    in Routes (at App.js:23)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:22)
    in ErrorBoundary (at App.js:21)
    in App (at src/index.js:59)
    in PersistGate (at src/index.js:58)
    in Provider (at src/index.js:57)

In v5, I had the following component:

import React from 'react';
import { Redirect } from 'react-router-dom';

export default ({ children }) => {
  const isAuthenticated = useSelector(state => !!state.auth.userId);

  if (!isAuthenticated) {
    return <Redirect to="/auth/login" />;
  }

  return children;
};

Which is implemented via:

<Switch>
  <Route exact component={AuthLogin} path="/auth/login" />
  <Authenticated>
    <Route exact component={Dashboard} path="/" />
  </Authenticated>
</Switch>

In v6, I have modified that component to be:

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

export default () => {
  const isAuthenticated = useSelector(state => !!state.auth.userId);

  if (!isAuthenticated) {
    return <Navigate to="/auth/login" />;
  }

  return <Outlet />;
};

Which is implemented via:

<Routes>
  <Route exact element={<AuthLogin />} path="/auth/login" />
  <Route element={<Authenticated />} path="/">
    <Route exact element={<Dashboard />} path="/" />
  </Route>
</Routes>

When navigating to http://localhost:3000, I am properly redirected to http://localhost:3000/auth/login, but receive the aforementioned console warning.

Is there a different way I should be doing this with v6?

[timdorr]

This is a new warning in React 16.13.

I think the problem is we're issuing the effect of navigation in the Navigate component directly during rendering, not inside of a useEffect:

https://github.com/ReactTraining/react-router/blob/c5fa32954e2744c8b52aa8d4dbe2a885d2133428/packages/react-router/index.js#L98-L102

That alters the one single state value we maintain all the way up in Router:

https://github.com/ReactTraining/react-router/blob/c5fa32954e2744c8b52aa8d4dbe2a885d2133428/packages/react-router/index.js#L200-L205

Hence, you hit the new warning that React now watches for. Again, I think the effect hook will help with this.

[joejordan]

I have this error appearing on withRouter-wrapped components using react-router-dom 5.1.2. The stack trace is ridiculous on this new warning but it appears thus far only where I have wrapped a functional component.

[baurine]

react-router version: 6.0.0-alpha.2

With react 16.13.0, I get the same error message:

Warning: Cannot update a component from inside the function body of a different component.

after upgrading to 16.13.1, the error message changes to:

Warning: Cannot update a component (`Router`) while rendering a different component (`Routes`). To locate the bad setState() call inside `Routes`, follow the stack trace as described in https://fb.me/setstate-in-render.

screenshot:

[baurine]

Hi guys, do you have any plan to have a look at this issue?

[timdorr]

See the linked PR: #7203

[mjackson]

This was fixed in cbcd398

[mjackson]

Will be released shortly in 6.0.0-alpha.3 👍