маршрутизация вложенных страниц в Gatsby - PullRequest
Новая
       104

маршрутизация вложенных страниц в Gatsby

1 голос
/ 18 июня 2020

Я не нашел похожего topi c, соответствующего моему вызову.

У меня есть проект gatsby, который создает своего рода портал управления проектами. Я пытаюсь понять, как правильно настроить маршрутизацию между страницами. У меня есть главная страница, на которой отображается список проектов. Он должен быть доступен по пути URL "/ projects".

Каждый элемент списка предполагает ссылку на страницу проекта. Я хотел бы иметь его в пути "/ project- number ", где число должно быть динамическим c зависит от проекта, например, "/ project-1", "/project-2".

Каждый проект должен содержать 2 подстраницы: карта и описание с путем, например, «/ 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 - это компонент, введенный в индекс. 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>
    )
};

проектов. 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;

макет. 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

панель навигации. js содержит раскрывающийся список со ссылками на карту и описание подстраницы 

<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 - это подстраница отдельного проекта, где предполагается, что путь должен выглядеть "/ project-1 / map" 

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

export default DescriptionPage

Мои проблемы:

  1. Как создать динамический c путь, который будет включать номер проекта "/ номер-проекта"
  2. Как я могу использовать компоненты описание. js и карту. js (аналогично описанию. js) в качестве шаблонов, куда будет динамически вставляться контент из проектов. js. Другими словами, я хочу иметь только одну карту. js и одно описание. js в папке src / pages / map. js, в которой будет отображаться различное содержимое, в зависимости от выбранного проекта в индексе. js .
  3. map. js и описание. js должен иметь путь "/ project-1 / map", "/ project-2 / map", et c.
...