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?
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;
Advertisement
Answer
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.