Обрыв доступа к маршрутизатору с префиксами пути Gatsby

У меня есть сайт Gatsby, обслуживаемый в http://server/test (т.е. не в корне сервера), который работает в gatsby develop. Но gatsby build, а затем обслужить сайт, терпит неудачу.

В инструкциях Гэтсби говорится, что нужно изменить gatsby-config.js, чтобы включить pathPrefix: '/test', а затем при создании сайта запустить gatsby build --prefix-paths, что я и делаю.

Это полностью работает для статических маршрутов, содержащихся в моем src/pages.

Проблема, по-видимому, в том, что динамические / частные / защищенные маршруты Reach Router не изменяются с учетом префикса пути, но статические маршруты изменяются. Итак, в этой файловой структуре:

~/Documents/app/src/pages
- index.tsx (landing page)
- app.tsx (app root page that includes the router config)

Эти две страницы обслуживаются правильно (после настройки Apache / nginx для обслуживания var/www/html на http://localhost/test) как http://localhost/test и http://localhost/test/app.

Вот роутер:

<Layout>
      <ErrorAlert/>
      <Router basepath={"/app"}>
        <Login default path="/login"/>
        <PrivateRoute path="/projects" component={Projects}/>
        <PrivateRoute path="/project" component={ProjectDetails} />
        <PrivateRoute path="/project/:projectId" component={ProjectDetails} />
        <PrivateRoute path="/profile" component={Profile} />
        <PrivateRoute path="/profile/edit" component={EditProfile} />
        <PrivateRoute path="/profile/change-password" component={EditPassword} />
        <PrivateRoute path="/settings" component={Settings}/>
      </Router>
    </Layout>

Вот PrivateRoute:

export const PrivateRoute:React.FC<PrivateRouteProps> = ({component, location, ...rest}) => {
  const token = useSelector(tokenLens.get) // Option<string>
  const dispatcher = useDispatch()

  const storeAttemptedPageUrl = flow(storeAttemptedVisit, dispatcher)
  const isUnauthorizedVisit = () => isNone(token) && location.pathname !== '/app/login'

  const sendToLogin = () => {
    storeAttemptedPageUrl(location.pathname)
    navigate('/app/login')
    return <div/>
  }

  React.useEffect(() => {
    if(isUnauthorizedVisit()) {
      sendToLogin()
    } else {
      pipe(
        getAndStoreProfile()
      )()
    }
  }, [token])
  return pipe(token, map(()=>component(rest)), getOrElse(()=><></>)) //IE, render component if auth token exists, otherwise temporarily render blank page until redirect to login is complete
}

http://localhost/test переводит меня к содержимому pages/index.tsx, которое содержит <Link> для приложения. (который получает / test добавлен). Все идет нормально. Маршрут по умолчанию - Login, который отображается. Я заполняю данные для входа и нажимаю «Отправить», что (после аутентификации) запускает в моем компоненте входа следующий код: navigate('/app/projects').

Это должно загрузить компонент, предоставленный <PrivateRoute path="/projects" component={Projects}/>. Вместо этого ничего не происходит. Страница просто сидит при входе в систему. Похоже, что приложение пытается загрузить компонент, используя неправильный маршрут (запутанный из-за префикса пути), не находя его и перенаправляя на значение по умолчанию (логин). Мы уже по умолчанию, поэтому, похоже, ничего не происходит.

Devtools подтверждает, что происходит фактическая аутентификация.

Similar issues on SO?

Нет. Здесь человек, имеющий несколько иной проблема с статическими маршрутами, которая связана с неправильной конфигурацией фактического сервера.

Здесь обсуждается Gatsby о том, что похоже на ту же проблему, что и у меня. Но, осознавая, что это своего рода вопрос службы поддержки, а не ошибка, и эта проблема была закрыта из-за устаревания, я спрашиваю здесь. Я пробовал оба предложенных решения на этой странице безрезультатно, а у Гэтсби нет документации о префиксах пути и маршрутизаторе доступа.

Одно из предлагаемых исправлений - использовать __PATH_PREFIX__ в качестве базового пути вашего маршрутизатора охвата, и утверждает, что Гэтсби делает его глобальной переменной. Это не похоже на правду. Находясь на сайте, я открываю консоль разработчика и набираю __PATH_PREFIX__, а оно не определено.

Другое исправление тоже не работает.

Это не может быть существующей ошибкой, потому что 100% людей, использующих Gatsby, не могут работать в корневом каталоге документа только со статическими страницами и без динамических, защищенных аутентификацией.


person user1713450    schedule 11.12.2020    source источник


Ответы (1)


Ответ оказывается довольно простым, но его трудно отследить. В файле с роутером:

import { withPrefix } from 'gatsby'

<Router basepath={withPrefix("/app")}>

Это единственное необходимое изменение.

person user1713450    schedule 12.12.2020
comment
Спасибо @ user1713450 Я не заметил, чтобы использовать withPrefix, у меня это сработало - person Belal mazlom; 03.03.2021