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 包装器
将组件传递到 Route 作为嵌套组件的 component 道具

编辑：决定包括我的 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>
    );
};

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

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

React router v5：在动态路由中需要一个嵌套路由

React router v5: need a nested route in dynamic routes

javascript

reactjs

react-router

react-router-dom

react-router-v5