React router v5：需要动态路由中的嵌套路由

Question

具体发生在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包装器
• 将组件作为嵌套component prop 传递到Route

编辑：决定包含我的Item组件的一个版本，我可以在其中包含我可以想到的/about路由的所有变体。 绝对没有任何效果，它应该根据文档（请参阅递归路径）并且我开始质疑我的理智

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

Answer 1

所以看起来我是在以完全错误的方式解决这个问题。

对于我想要做的，我的嵌套路由需要在App组件上，或者至少在第一个Switch包装器的根上。

所以基本上这是解决方案：

const App = ({}) => {
    return (
        <Router>
            <Switch>
                <Route exact path='/:id' component={Item}/>
                <Route exact path='/:id/about' component={() => <div>TODO: About</div>}/>
                <Route exact path='/:id/faq' component={() => <div>TODO: FAQ</div>}/>
            </Switch>
        </Router>
    )
}

我仍然很困惑，因为文档以不同的方式显示它，但无论如何，这就是解决问题的方法。