React Router V5：在动态路由中需要嵌套路由

theJuls 发表于 Dev

灵魂

具体地说，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路线的所有路线。绝对没有任何效果，根据文档（应参阅递归路径），它应该起作用，并且我开始质疑自己的理智

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

灵魂

因此，似乎我正在采用完全错误的方式进行操作。

对于我想做的事情，我的嵌套路由需要在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>
    )
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。