javascript - 错误 : Absolute route path "/" nested under path "/app" is not valid

Question

我突然收到此错误，不知道为什么。我没有更改 "react-router-dom": "^6.0.0-beta.4"版本。但是 "react-dom": "^16.8.4" "已更改为 "react-dom": "^16.13.1" ,
不知道这是否与我不知道但 useRoutes 有任何关系来自 "react-router-dom"这就是错误的起源。
有人有线索吗？

这是我使用 useRoutes(routes) 的 App.jsx它给了我错误:

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

以下是路线，我在上个月没有更改它们:

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

我在 Material 套件 ui 上遇到过类似的问题，我修复了它，只需写 path:"" .将路径留空将解决问题