Динамическая маршрутизация в Гэтсби

Question

Я делаю следующее:

На страницах / app.js

import React from "react"
import Layout from "../components/layout"
import { Router } from "@reach/router"
import Categories from "../components/Categories/Categories"
import BookListPage from "../components/Book/BookListPage/BookListPage"
import BookDetail from "../components/Book/BookDetail/BookDetail"
import Reader from "../components/Book/Reader/Reader"
import Author from "../components/Book/Author/Author"
import Account from "../components/Login/Account"
import InvitationLink from "../components/Promotions/Invitations/InvitationLink"
import StackSocial from "../components/Promotions/StackSocial"
import PasswordChange from "../components/Login/PasswordChange"
import AcceptInvite from "../components/Promotions/Invitations/Accept"
import SignUp from "../components/Login/SignUp"
import Login from "../components/Login/Login"
import Logout from "../components/Login/Logout"


const App = () => (
  <Layout>
    <Router>
      <Categories path="/app/categories/:id" />
      <BookListPage path="/app/category/:category" />
      <BookListPage path="/app/category/:category" />
      <BookDetail path="/app/books/:id" />
      <Author path="/app/author/:id" />
      <Reader path="/app/reader/:id" />
      <Account path="/app/account" />
      <StackSocial path="/app/stacksocial" />
      <PasswordChange path="/app/passwordchange" />
      <InvitationLink path="/app/invite" />
      <AcceptInvite path="/app/invite/accept" />
      <Logout path="/app/logout" />
      <Login path="/app/login" />
      <SignUp path="/app/signup" />
    </Router>
  </Layout>
)

export default App

В gatsby-node.js:

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

Как изменитькод, чтобы все URL-адреса динамически маршрутизировались, а не только / app? Я хочу иметь возможность создавать динамический URL / книги /: идентификатор не / приложение / книги /: идентификатор

Я использую GATSBY JS React Framework

Answer 1

Удалить app/ часть:

      <Categories path="/categories/:id" />
      <BookListPage path="/category/:category" />
      <BookListPage path="/category/:category" />
      <BookDetail path="/books/:id" />
      {/* ... */}

Сделать так, чтобы он совпадал с базовым URL:

// Not sure if I edited this regex correctly. 
// Might need some more tweaking. 
// You want it to match everything after the first `/`
if (page.path.match(/^)) { 
  page.matchPath = "/*"