Gatsby中嵌套页面的路由选择

Question

我没有找到与我的chchallange相对应的类似的主题，我有一个gatsby项目，它创建了一种项目的管理门户，我试图弄清楚如何在页面之间创建正确的路由，我有一个主页面显示项目列表。

我有一个gatsby项目，它创建了一种项目的管理门户，我试图找出如何创建正确的页面之间的路由，我有一个主页面，显示项目列表。它应该在URL路径 "projects "中可用。

列表中的每个元素都应该是项目页面的链接。我想把它放在 "project-"路径中。数目"，其中数字应该是动态的，取决于项目的情况，例如 "project-1"，"project-2"。

每个项目应该包含2个子页面。地图 和 描述 路径，如 "project-1map"。地图 和 描述 子页面使用相同的Gatsby's Layout，根据显示项目的不同，内容也不同。

主页面 索引.js 路径应该是 "项目"。

import React from "react"

import Layout from "../components/layout"
import SEO from "../components/seo"

import ListOfContent from "../components/listOfContent";
import projects from "../data/projects";

const IndexPage = () => (
    <Layout pageInfo={{pageName: "index"}}>
        <SEO title="Home" />
            <ListOfContent projects={projects}/>
    </Layout>
);

export default IndexPage

listOfContent.js 是注入index.js中的一个组件。

const ListOfContent = props => {
    const { items } = props.projects;

    const listOfProjects = items.map( Item =>
            <ListGroup.Item key={Item.id} >
                <Image src={Item.customerLogo} className={style.CustomerLogo} />
                <Link to={`/${Item.projectUrlName}/projectPage`}>{Item.projectName}</Link>
            </ListGroup.Item>
    );
    return (
        <ListGroup>
            {listOfProjects}
        </ListGroup>
    )
};

projects.js是一个注入到index.js中的组件。 包含项目详细信息的数组

const projects = {
    items: [
        {
            id: uuidv4(),
            projectUrlName: "project-1",
            projectName: "Project-1",
            projectPicture: require('../images/building.png'),
            projectDescription: "{customer_logo}",
            customer: "Name",
            projectPosition: "//www.arcgis.com/apps/Embed/index.html?webmap=...",
        },
        {...},
    ],
};

export default projects;

layout.js

const Layout = ({ children, pageInfo, data }) => {
    const {items} = projects;
    return (
              <>
                <Container fluid className="px-0 main">
                  <Navbar pageInfo={pageInfo} items={items}/>
                  <Row noGutters>
                    <Col>
                      <Container className="mt-5">
                        <main>{children}</main>
                      </Container>
                    </Col>
                  </Row>
                </Container>
              </>
        )}
      />
)};

export default Layout

导航条 包含有链接的下拉菜单 地图 和 描述 子页

<Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" activeKey={props.pageInfo && pageName}>
              <NavDropdown title={projectName} id="collapsible-nav-dropdown">
                  <NavDropdown.Item><Link to="map" activeClassName="active">map</Link></NavDropdown.Item>
                  <NavDropdown.Item><Link to="description" activeClassName="active">description</Link></NavDropdown.Item>
          </Nav>

描述.js是一个项目的子页面，其中路径应该是 "项目-1map"。 是一个项目的子页面，路径应该是 "project-1map"

const DescriptionPage = () => (
  <Layout pageInfo={{ pageName: "description" }}>
    <SEO title="Project description" />
    <h1>project name</h1>
    <p>description</p>
  </Layout>
);

export default DescriptionPage

我的挑战是，如何创建包含项目编号的动态路径？

1. 如何创建包含项目编号的动态路径？
2. 如何使用组件 描述.js 和 map.js (类似于description.js)作为一个模板，其中将动态地从 项目.js. 换句话说，我希望在srcpagesmap.js文件夹中只有一个map.js和一个description.js，这两个文件夹会根据index.js中选择的项目显示不同的内容。
3. map.js和description.js的路径必须是 "project-1map"、"project-2map "等。