Question

我没有找到与我遇到的挑战相对应的类似主题。

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

列表中的每个元素都应该是指向项目页面的链接。我想将其放在路径“ / project- 编号”中，其中编号应该是动态的，取决于项目，例如“ /project-1”、“/project-2”。

每个项目应包含2个子页面： map 和 description ，其路径例如为“ / project-1 / map”。 map 和 description 子页面都使用相同的Gatsby布局和不同的内容，具体取决于显示的项目。

index.js 主页，其中的路径假定为“ / projects”：

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 包含一系列项目详细信息

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.js 包含下拉菜单，其中包含指向 map 和 description 子页面

的链接

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

description.js 是单个项目的子页面，其中的路径假定看起来是“ / project-1 / map”

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

export default DescriptionPage

我的挑战是：

如何创建包含项目编号“ / project-number”的动态路径
如何使用组件 description.js 和 map.js （类似于description.js）作为模板，可以动态地注入项目中的内容.js 。换句话说，我想在文件夹src / pages / map.js中只包含一个map.js和一个description.js，这将显示不同的内容，取决于index.js上选择的项目。
map.js和description.js必须具有路径“ / project-1 / map”，“ / project-2 / map”等。

Gatsby中嵌套页面的路由

0 个答案: