Error: Absolute route path "/" nested under path "/app" is not valid

Question

I suddenly get this error and not sure why.

I did not change the "react-router-dom": "^6.0.0-beta.4" version.

But the "react-dom": "^16.8.4"" vad changed to "react-dom": "^16.13.1", Dunno if that had anything to do with I don't know but the useRoutes comes from "react-router-dom" and that's where the error originate ya.

Anyone have a clue?

Here is my App.jsx where i use the useRoutes(routes) and it's giving me the error:

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 = () => {
    const routing = useRoutes(routes);

    return (
        <AnimatePresence exitBeforeEnter initial={false}>
            <div>{routing}</div>
        </AnimatePresence>
    );
};

const App = props => {
    const { getMeta, getAlbum, startTagListener, startTagCategoryListener } = props;

    useEffect(() => {
        getMeta();
        getAlbum();
        startTagListener();
        startTagCategoryListener();
    }, [getMeta, getAlbum, startTagListener, startTagCategoryListener]);

    return (
        <ThemeContextProvider>
                {AnimatedSwitch()}
        </ThemeContextProvider>
    );
};
const mapDispatchToProps = dispatch => ({
    getMeta: () => dispatch(getMetaData()),
    getAlbum: () => dispatch(getAlbumData()),
    startTagListener: () => dispatch(startTagsListener()),
    startTagCategoryListener: () => dispatch(startTagsCategoryListener()),
});

export default compose(connect(null, mapDispatchToProps), withAuthentication)(App);

Here are the routes and I have not changed them in the last month:

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: <DashboardLayout />,
        children: [
            { path: 'account', element: <AccountView /> },
            { path: 'search', element: <SearchListView /> },
            { path: 'dashboard', element: <DashboardView /> },
            { path: 'create', element: <CreateContentView /> },
            { path: 'submissions', element: <SubmissionsView /> },
            { path: 'inbox', element: <InboxView /> },
            { path: 'settings', element: <SettingsView /> },
            { path: 'login', element: <LoginView /> },
            { path: 'register', element: <RegisterView /> },
            { path: '*', element: <NotFoundView /> },
            { path: '/', element: <DashboardView /> },
        ],
    },
    {
        path: '/',
        element: <ContentLayout />,
        children: [
            { path: '404', element: <NotFoundView /> },
            { path: '*', element: <NotFoundView /> },
        ],
    },
];

export default routes;

Answer 1

I have seen the error message and it clearly explains that path "/" should not be given under route "app".So try changing the path to some other valid name or remove it.

Answer 2

I have had a similar issue with material kit ui, and i fixed it simply just write path:"". leaving the path empty will fix the problem

Answer 3

Just remove the last child path "/" and it will fix the problem.

Answer 4

I have same issue.I fixed it that change '/' to '' or '/' to index.

<Routes>
    <Route path='/' element={<Home/>} />
    <Route path='Chart' element={<Charts/>}>
      <Route path='' element={<ChartList/>}/>
      <Route path=':slug' element={<Chart/>}/>
    </Route>
    <Route path='*' element={<ErrorPage/>} />
  </Routes>

or

 <Routes>
        <Route path='/' element={<Home/>} />
        <Route path='Chart' element={<Charts/>}>
          <Route index element={<ChartList/>}/>
          <Route path=':slug' element={<Chart/>}/>
        </Route>
        <Route path='*' element={<ErrorPage/>} />
      </Routes>

Answer 5

In the case you are nesting Routes, one workaround is to group them together:

From

<BrowserRouter>
      <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="products" element={<Foo/>}
               <Route path="/" element={<Bar/>}/>
               <Route path=":id" element={<FooBar/>}/>
           </Route>
       </Routes>
</BrowserRouter>

To

<BrowserRouter>
      <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="products/:id" element={<Product />}/>
       </Routes>
</BrowserRouter>