为什么我的嵌套路由组件没有在 react-router-dom 6 中呈现？

Question

我的 App.tsx 文件中有以下路线：

import { default as Collections } from './pages/collections/Root';

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/collections/*" element={<Collections />} />
</Routes>

这就是我的 Collections 文件中的内容：

const Root = () => {
    return (
        <>
            <DocumentTitle title="Collections" />

            <Navbar baseUrl="/collections" />

            <Routes>
                <Route path="/collections" element={<Collections />} />
                <Route path="/collections/create" element={<AddCollection />} />
                <Route path="/collections/categories" element={<Categories />} />
                <Route path="/collections/edit/:collectionId" element={<EditCollection />} />
                <Route path="/collections/addItems/:collectionId" element={<ManageCollectionItems />} />
            </Routes>
        </>
    );
};

export default Root;

当我访问 /collections URL 时，我可以看到文档标题和导航栏已加载到 DOM，但是，我没有看到任何嵌套路线，我也没有收到任何错误或警告。

Answer 1

你的顶级路由正在处理 URL 的 /collections 部分，因此嵌套路由也有 /collections 会让我想知道路由器是否期待你的 URL 变为 /collections/collections

为什么我的嵌套路由组件没有在 react-router-dom 6 中呈现？

Why are my nested route components not rendering in react-router-dom 6?

javascript

reactjs

react-router-dom