Как убрать "/ app" из маршрута в Гэтсби

Question

У меня настроен проект gatsby, и мои маршруты работают, только если он содержит /app из-за этого gatsby файла nodejs.

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

Мне нужно удалить /app со всех моих компонентов. Возможно ли это сделать?

А также в производственном режиме мои динамические маршруты не работают, в чем проблема?

const App = () => (
  <Layout>
    <Router>
      <VerifyToken path="/app/:token"/>
      <MagicLink path="/app/link/:magicLink"/>
    </Router>
  </Layout>
)

Answer 1

Код в вашем файле gatsby-node.js используется для создания так называемых маршрутов только для клиента .В документах Gatsby они приводят пример, который используется для создания маршрутов, доступных только зарегистрированным пользователям.Эти маршруты будут существовать только на клиенте и не будут соответствовать файлам в встроенных ресурсах приложения на сервере.

Вы можете исключить маршрут /app, если его ничто не использует.Но только на основе примера компонента, который вы опубликовали, кажется, что ваше приложение использует его, и вы упомянули «динамические маршруты».Таким образом, вам нужно что-то , чтобы идентифицировать эти маршруты и сделать их особенными для Гэтсби.

Короче говоря, этот "маршрут только для клиента" должен означать, что Гэтсби не будет создавать никаких серверовбоковые страницы для этого маршрута.Но тогда вы должны создать компоненты приложения (в основном это компоненты React), которые будут реагировать на этот маршрут и динамически создавать контент.

В префиксе /app нет ничего особенного.Вы можете сделать все, что захотите, при условии, что он будет согласован между вашей конфигурацией Gatsby и вашими клиентскими компонентами и маршрутизатором, который использует ваш клиент (надеюсь, Gastby уже встроил @ reach / router?).Но чтобы создать гибридное приложение, в котором некоторый контент будет отображаться на стороне сервера Gatsby, а другой контент - динамически на стороне клиента, я вполне уверен, что вам нужен какой-то префикс, чтобы это работало, чтобы Gatsby мог определить разницу между двумя икак их визуализировать.Однако из документов Гэтсби на странице matchPath не ясно, как это работает.Из примера кода в документах Gatsby, он берет регулярное выражение.Возможно, что вместо /app вы могли бы попытаться сопоставить какую-то другую строку где-нибудь еще в пути, вместо того, чтобы быть в начале пути.Что бы вы ни делали, необходимо настроить маршрутизатор на стороне клиента так, чтобы он соответствовал этому маршруту.

Я не думаю, что документы Gatsby настолько хороши, что я понимаю вашу борьбу за то, чтобы заставить это работать.Это почтовое приложение Gatsby может помочь вам, поскольку оно использует другой префикс (/threads) и имеет полный исходный код для приложения, которое использует динамические страницы на стороне клиента + статическое содержимое.

А также в производственном режиме мои динамические маршруты не работают, в чем проблема?

Очень трудно сказать с предоставленным вами ограниченным кодом.Не похоже, что это полный источник этого компонента.Ваш компонент называется src/pages/app.js или src/pages/app/index.js?Вот что нужно назвать для обработки маршрутизации для префикса /app.