Как создать динамический маршрут в Гэтсби - PullRequest
Новая
       16

Как создать динамический маршрут в Гэтсби

0 голосов
/ 19 апреля 2019

Я установил проект gatsby, используя эту ссылку . Это работает правильно.

Теперь я знаю, как создать маршрут, определив компонент внутри папки pages. Но теперь у меня есть новый вызов, мне нужно создать один динамический маршрут, чтобы я мог передать свой id (точно так же как reactjs). 

<Route path: "/path/:id"/>

Как мне это сделать в Гэтсби?

Ответы [ 2 ]

2 голосов
/ 19 апреля 2019

Вы должны явно сказать Гэтсби, что путь должен быть динамическим.Из документов : 

// gatsby-node.js
// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

и затем вы можете использовать динамическую маршрутизацию в src/pages/app.js

const SomeSubPage = props => {
  return <div>Hi from SubPage with id: {props.id}</div>
}

const App = () => (
  <Layout>
    <Link to="/app/1">First item</Link>{" "}
    <Link to="/app/2">Second item</Link>{" "}

    <Router>
      // ...dynamic routes here
      <SomeSubPage path="/app/:id" />
    </Router>
  </Layout>
)

export default App

Все, что идет к /app/*, будет обрабатываться динамическисейчас.Вы должны найти свой идентификатор как обычно в реквизите.

Посмотрите на их пример аутентификации https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth

0 голосов
/ 12 июля 2019

Вы можете использовать gatsby-plugin-create-client-paths.Он использует matchPath.Для получения дополнительной информации проверьте

  1. https://www.gatsbyjs.org/docs/gatsby-internals-terminology/#matchpath
  2. https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/
...