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

【问题标题】：Error: Absolute route path "/" nested under path "/app" is not valid错误：嵌套在路径“/app”下的绝对路由路径“/”无效
【发布时间】：2021-09-23 11:59:48
【问题描述】：

我突然收到这个错误，不知道为什么。

我没有更改 "react-router-dom": "^6.0.0-beta.4" 版本。

但是 "react-dom": "^16.8.4"" vad 改为 "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;

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

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

【讨论】：

这应该是正确的答案，它可以为我节省数小时寻找解决方案的挫败感。

【解决方案2】：

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

【讨论】：

谢谢。这很奇怪，我的代码基于this material-kit-react，而且他们的工作正常
当我删除路径下的 / 应用程序时，它可以工作，谢谢。奇怪的是，在 Codesandbox that I based my code on it's working having a "/" 中。同样在很多个月以来，我在 App 路径下的代码中都有那个“/”，只是突然我得到了错误
@Kid 同样发生在我身上，可能应用程序运行良好，没有任何问题，即使我没有更新任何部门，所有应用程序突然突然关闭。就这样。

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您嵌套Routes，一种解决方法是将它们组合在一起：

来自

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

到

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

【讨论】：