Search code examples
javascriptreactjsreact-router-dom

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

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"" had 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?

enter image description here

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;
Solution

  • 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.