此问题已在此处有答案：

React child nested routes（1个答案）
2天前关闭。
特别是在react-router-dom v5.2.0上，我有一个项目列表，所有这些项目都需要自己的页面，在动态路由中，我希望有一些嵌套的路由。
你可以这样想：

• myapp.com/:item（主条目页面）
• myapp.com/:item/about（关于项目页面）
• myapp.com/:item/faq（常见问题解答页面）

问题是，在我实现它的方式下，每个嵌套的/:item/whatever页面都会得到一个404。以下是我的路由目前的样子：

const App = ({}) => {
    return (
        <Router>
            <Switch>
                <Route exact path='/:id' component={Item}>
                </Route>
            </Switch>
        </Router>
    )
}

const Item = ({ match }) => {
    return (
        <div>
            TODO: Item {match.url}
            <Switch>
                <Route path={`${match.path}/about`}>
                    <h1>TODO: About</h1>
                </Route>
                <Route path={`${match.path}/faq`}>
                    <h1>TODO: FAQ</h1>
                </Route>
            </Switch>
        </div>
    );
};

就目前情况而言，我可以获得/:item的页面，但如果我试图转到它们的嵌套路由，我会得到404。我的设置有问题吗？我怎么才能让它工作？
请注意，我已经尝试了一系列不同的变体：

• App组件中的嵌套路由
• 使用和不使用Switch Package 器
• 将组件作为嵌套组件的component属性传递到Route中

编辑：决定包含我的Item组件的一个版本，在那里我有我能想到的/about路由的每一个路由变体。绝对没有任何工作，它应该根据文档（see the recursive paths），我开始怀疑我的理智

const Item = ({ match }) => {
    const { url } = useRouteMatch();
    return (
        <div>
            TODO: Item {match.url}
            <Route path={`${url}/about`} component={() => <h1>TODO: About</h1>}/>
            <Route path={`/about`} component={() => <h1>TODO: About</h1>}/>
            <Route path={`about`} component={() => <h1>TODO: About</h1>}/>
            <Route path={`:about`} component={() => <h1>TODO: About</h1>}/>
            <Switch>
                <Route path={`${match.path}/about`}>
                    <h1>TODO: About</h1>
                </Route>
                <Route path={`${url}/about`} component={() => <h1>TODO: About</h1>}/>
                <Route path={`/about`} component={() => <h1>TODO: About</h1>}/>
                <Route path={`/:about`} component={() => <h1>TODO: About</h1>}/>
                <Route path={`about`} component={() => <h1>TODO: About</h1>}/>
                <Route path={`:about`} component={() => <h1>TODO: About</h1>}/>
            </Switch>
        </div>
    );
};