Почему @ достигает / роутер автоматически указывает путь к имени каталога страницы? - PullRequest
Новая
       59

Почему @ достигает / роутер автоматически указывает путь к имени каталога страницы?

0 голосов
/ 26 апреля 2020

В настоящее время я использую Gatsby и @ reach / router

Я хотел бы связать свою страницу about с '/ profile'

мой маршрутизатор выглядит так: 

<Router>
  <Home path="/" />
  <About path="/profile" />
  <Blog path="/blog" />
  <Contact path="/contact" />
</Router>

Почему моя страница "about" отображается в '/ about', а не в '/ profile'?

Кроме того, где вы размещаете свой компонент маршрутизатора? В настоящее время приведенный выше код является моим приложением. js file. Это лучшая практика?

1 Ответ

0 голосов
/ 26 апреля 2020

Единственный способ заставить @ reach / router работать с Гэтсби состоял в том, чтобы все мои маршруты проходили через Компонент высокого порядка, вот так. Также у меня есть Маршрутизатор, вложенный в мою оболочку Layout. Помните, что любой js в папке страниц будет обслуживаться сам по себе (без нижних колонтитулов / заголовков или чего-либо еще), поэтому если это для SPA, у вас должен быть только индекс. js в папке страниц. Если вам нужно больше проверить этот репо: https://github.com/foestauf/gatsby-starter-default-SPA Я не создал это, но я не могу вспомнить, где я его нашел, это то, что в конечном итоге заставило Gatsby SPA щелкнуть для меня. 

import { Router } from "@reach/router"

const LazyComponent = ({ Component, ...props }) => (
  <React.Suspense fallback={"<p>Loading...</p>"}>
    <Component {...props} />
  </React.Suspense>
)

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <Link to="/">Home</Link>
    <Link to="/contact/">Contact</Link>
     <Link to="/about-us/">About Us</Link>
    <Router>
      <Home path="/" />
      <LazyComponent Component={Contact} path="contact" />
      <LazyComponent Component={About} path="about-us" />
    </Router>
  </Layout>
)
...