从数组创建多个路由和嵌套路由

Question

我有一个项目数组，每个项目都需要有自己的路由和一些其他嵌套路由。可以这样想：

myapp.com/[项目]（项目主页面）
myapp.com/[item]/about（关于商品页面）
myapp.com/[item]/faq（常见问题页面）

问题是我有一个项目列表，理想情况下每个项目都应该有自己的 about 和 faq 页面。如果我能够只遍历数组并呈现每个 Route，那就太好了。像这样：

const items = [
    { id: 1, name: 'item1' },
    { id: 2, name: 'item2' },
    { id: 3, name: 'item3' },
    { id: 4, name: 'item4' }
]

const App = () => {
    return (
        <Router>
            <Switch>
                {items.map(({ id, name }, index) => (
                    <React.Fragment key={id}>
                        <Route path={`/${name}`} component={<ItemComponent/>}/>
                        <Route path={`/${name}/about`} component={<AboutItemComponent/>}/>
                        <Route path={`/${name}/faq`} component={<FaqItemComponent/>}/>
                    </React.Fragment>
                ))}

                <Route path="*" render={() => <div>Not Found</div>} />
            </Switch>
        </Router>
    )
}

不幸的是，这不起作用。出现以下问题：

只有第一项实际获得路线。其他人什么都不渲染（没有 404 或任何东西，但我得到一个空白页面）。
如果我尝试访问嵌套路由，我会收到 404，即使对于实际呈现的一条路由也是如此。

如果我只是通过数组来渲染单个路由，它们就可以正常工作。我指的是这样的东西：

const App = () => {
    return (
        <Router>
            <Switch>
                {items.map(({ id, name }, index) => (
                    <Route path={`/${name}`} component={<ItemComponent/>}/>
                ))}

                <Route path="*" render={() => <div>Not Found</div>} />
            </Switch>
        </Router>
    )
}

但是为了让我到达我需要的所有路线，我必须做很多这样的事情 .map()，这似乎适得其反。必须有一种更简单和正确的方法来完成这项工作。有什么建议吗？

谢谢！

Answer 1

我不确定您是否需要创建所有这些路由。您可以通过使用 URL 参数来使用三个：

const App = () => {
    return (
        <Router>
            <Switch>
              <Route path="/:item/about" component={<AboutItemComponent/>}/>
              <Route path="/:item/faq" component={<FaqItemComponent/>}/>
              <Route exact path="/:item" component={<ItemComponent/>}/>
            </Switch>
        </Router>
    )
}

React Router 站点上有一个示例也显示了这一点 - https://reactrouter.com/web/example/url-params

正如您在他们的示例中看到的那样，那些被渲染的组件随后可以访问 URL 参数并为该项目渲染正确的信息。

如果您确实有比这更复杂的路由结构，您可以开始查看他们的 Route Config example and the react-router-config 模块。

但是，对于您提供的示例路线，我会保持简单，只使用 URL 个参数。

从数组创建多个路由和嵌套路由

Create multiple routes and nested routes from array

javascript

reactjs

react-router

react-router-dom

react-router-v5