title: How to fix: 'Error: Maximum update depth exceeded'
body: <p>I'm new in React. Have problem with react-router</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>Index.tsx</p>
  
  <pre><code>          &lt;PrivateRoute path='/' component={Main} /&gt; //without exact
            &lt;Route path='/signin' component={SignIn} /&gt;
  </code></pre>
  
  <p>PrivateRoute.tsx:</p>
  
  <pre><code>export const PrivateRoute = ({ component: Component, ...rest }) =&gt; (
    &lt;Route
      {...rest}
      render={props =&gt;
        localStorage.getItem('authToken') ? (
          &lt;Component {...props} /&gt;
        ) : (
          &lt;Redirect
            to={{ pathname: '/signin', state: { from: props.location } }}
          /&gt;
        )
      }
    /&gt;
  )
  </code></pre>
  
  <p>Main.tsx:</p>
  
  <pre><code>const Main: FC = () =&gt; {
    return (
      &lt;App&gt;
        &lt;Switch&gt;
          {routes.map(route =&gt; (
            &lt;Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.component}
            /&gt;
          ))}
        &lt;/Switch&gt;
      &lt;/App&gt;
    )
  }
  </code></pre>
  
  <p>routes.tsx:</p>
  
  <pre><code>export const routes = [
    {
      path: '/shop',
      key: 'market',
      component: props =&gt; (
        &lt;LazyLoad
          component={React.lazy(() =&gt; import('./modules/shop/pages/Shop'))}
          {...props}
        /&gt;
      ),
    },
    {
      path: '/',
      exact: true,
      component: () =&gt; &lt;div&gt;main&lt;/div&gt;,
      skip: true,
    },
  ]
  </code></pre>
  
  <p>App.tsx:</p>
  
  <pre><code>const App: FC&lt;AppProps&gt; = ({ children }) =&gt; {
    const classes = useStyles()
    const sidebarToggle = useState(false) // recommended: collapsed, setCollapsed
    return (
      &lt;div className={classes.wrapper}&gt;
        &lt;SidebarContext.Provider value={sidebarToggle}&gt;
          &lt;Sidebar /&gt;
          &lt;main className={classes.main}&gt;
            &lt;section className={classes.routeWrapper}&gt;
              &lt;Nav /&gt;
              &lt;div className={classes.route}&gt;{children}&lt;/div&gt;
            &lt;/section&gt;
          &lt;/main&gt;
        &lt;/SidebarContext.Provider&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>So, problem is: without exact route i don't have this error, but when pass exact props to PrivateRoute, my shop component not works</p>