title: Error: Absolute route path "/" nested under path "/app" is not valid
body: <p>I suddenly get this error and not sure why.I did not change the <code>&quot;react-router-dom&quot;: &quot;^6.0.0-beta.4&quot;</code> version. But the <code>&quot;react-dom&quot;: &quot;^16.8.4&quot;</code>&quot; had changed to <code>&quot;react-dom&quot;: &quot;^16.13.1&quot;</code>,
  Dunno if that had anything to do with I don't know but the <code>useRoutes</code> comes from <code>&quot;react-router-dom&quot;</code> and that's where the error originate ya.</p>
  <p>Anyone have a clue?</p>
  <p><a href="https://i.stack.imgur.com/Lk2gb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lk2gb.png" alt="enter image description here" /></a></p>
  <p>Here is my App.jsx where i use the <code>useRoutes(routes)</code> and it's giving me the error:</p>
  <pre><code>import React, { useEffect } from 'react';
  import { AnimatePresence } from 'framer-motion';
  import { connect } from 'react-redux';
  import { compose } from 'recompose';
  import { useRoutes } from 'react-router-dom';
  import { ThemeContextProvider } from './theme/ThemeProvider';
  import { getAlbumData } from './redux/albumData/albumData.actions';
  import { getMetaData } from './redux/albumMetaData/albumMetaData.actions';
  import {
      startTagsListener,
      startTagsCategoryListener,
  } from './redux/global/global.actions';1111
  
  import { withAuthentication } from './session';
  import './styles/index.css';
  import routes from './routes';
  
  require('react-dom');
  
  const AnimatedSwitch = () =&gt; {
      const routing = useRoutes(routes);
  
      return (
          &lt;AnimatePresence exitBeforeEnter initial={false}&gt;
              &lt;div&gt;{routing}&lt;/div&gt;
          &lt;/AnimatePresence&gt;
      );
  };
  
  const App = props =&gt; {
      const { getMeta, getAlbum, startTagListener, startTagCategoryListener } = props;
  
      useEffect(() =&gt; {
          getMeta();
          getAlbum();
          startTagListener();
          startTagCategoryListener();
      }, [getMeta, getAlbum, startTagListener, startTagCategoryListener]);
  
      return (
          &lt;ThemeContextProvider&gt;
                  {AnimatedSwitch()}
          &lt;/ThemeContextProvider&gt;
      );
  };
  const mapDispatchToProps = dispatch =&gt; ({
      getMeta: () =&gt; dispatch(getMetaData()),
      getAlbum: () =&gt; dispatch(getAlbumData()),
      startTagListener: () =&gt; dispatch(startTagsListener()),
      startTagCategoryListener: () =&gt; dispatch(startTagsCategoryListener()),
  });
  
  export default compose(connect(null, mapDispatchToProps), withAuthentication)(App);
  </code></pre>
  <p>Here are the routes and I have not changed them in the last month:</p>
  <pre><code>import React from 'react';
  import ContentLayout from './components/structure/ContentLayout';
  import DashboardLayout from './components/DashboardLayout';
  import AccountView from './components/DashboardLayout/views/account/AccountView';
  import SearchListView from './components/DashboardLayout/views/search/SearchListView';
  import DashboardView from './components/DashboardLayout/views/dashboard/DashboardView';
  import NotFoundView from './components/DashboardLayout/views/errors/NotFoundView';
  import CreateContentView from './components/DashboardLayout/views/creator/CreateContentView';
  import SettingsView from './components/DashboardLayout/views/settings/SettingsView';
  import LoginView from './components/DashboardLayout/views/auth/LoginView';
  import RegisterView from './components/DashboardLayout/views/auth/RegisterView';
  import SubmissionsView from './components/DashboardLayout/views/submissions/SubmissionsView';
  import InboxView from './components/DashboardLayout/views/inbox/InboxView';
  
  const routes = [
      {
          path: 'app',
          element: &lt;DashboardLayout /&gt;,
          children: [
              { path: 'account', element: &lt;AccountView /&gt; },
              { path: 'search', element: &lt;SearchListView /&gt; },
              { path: 'dashboard', element: &lt;DashboardView /&gt; },
              { path: 'create', element: &lt;CreateContentView /&gt; },
              { path: 'submissions', element: &lt;SubmissionsView /&gt; },
              { path: 'inbox', element: &lt;InboxView /&gt; },
              { path: 'settings', element: &lt;SettingsView /&gt; },
              { path: 'login', element: &lt;LoginView /&gt; },
              { path: 'register', element: &lt;RegisterView /&gt; },
              { path: '*', element: &lt;NotFoundView /&gt; },
              { path: '/', element: &lt;DashboardView /&gt; },
          ],
      },
      {
          path: '/',
          element: &lt;ContentLayout /&gt;,
          children: [
              { path: '404', element: &lt;NotFoundView /&gt; },
              { path: '*', element: &lt;NotFoundView /&gt; },
          ],
      },
  ];
  
  export default routes;
  </code></pre>