错误：嵌套在路径“/app”下的绝对路由路径“/”无效

Question

我突然收到这个错误，不知道为什么。我没有更改版本"react-router-dom": "^6.0.0-beta.4"。但是"react-dom": "^16.8.4"“已更改为"react-dom": "^16.13.1"，不知道这是否与我不知道有什么关系，但它useRoutes来自哪里"react-router-dom"，这就是错误的根源。

有人知道吗？

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

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

我在材料套件用户界面上遇到了类似的问题，我只需编写即可修复它path:""。将路径留空即可解决问题

Answer 2

我有同样的问题。我修复了它，将“/”更改为“”或将“/”更改为索引。

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

或者

 <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 3

只需删除最后一个子路径“/”即可解决问题。

Answer 4

我已经看到错误消息，它清楚地解释了路径“/”不应在路由“app”下给出。因此，请尝试将路径更改为其他有效名称或将其删除。