Reach Router 使用 Gatsby 路径前缀中断答案

【问题标题】：Reach Router breaks with Gatsby path prefixesReach Router 使用 Gatsby 路径前缀中断
【发布时间】：2020-12-11 17:13:52
【问题描述】：

我有一个在 http://server/test 服务的 Gatsby 站点（即，不在服务器的根目录），它在 gatsby develop 中工作。但是gatsby build 然后提供网站，它失败了。

盖茨比的说明说修改gatsby-config.js 以包含pathPrefix: '/test'，然后在构建站点时运行gatsby build --prefix-paths，我这样做了。

这完全适用于我的src/pages 中包含的静态路由。

问题似乎是到达路由器动态/私有/受保护的路由不会被修改以考虑路径前缀，但静态路由会。所以在这个文件结构中：

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

这两个页面作为http://localhost/test 和http://localhost/test/app 正确提供（在将Apache/nginx 配置为在http://localhost/test 提供var/www/html 之后）。

这是路由器：

<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> 到“app”。（它会在前面加上“/test”）。到目前为止，一切都很好。默认路由是登录，它会显示出来。我填写我的登录信息并点击提交，这（在身份验证后）在我的登录组件中触发以下代码：navigate('/app/projects')。

这应该会加载<PrivateRoute path="/projects" component={Projects}/> 提供的组件。相反，什么也没有发生。该页面仅位于登录时。看起来应用程序正在尝试使用错误的路由（被路径前缀的东西混淆）加载组件，没有找到它，并重定向到默认值（登录名）。我们已经处于默认状态，所以看起来什么都没有发生。

Devtools 确认正在进行实际的身份验证。

SO上的类似问题？

没有。 Here 是一个人对 static 路由有一个微妙不同的问题，这归结为实际服务器的配置错误。

Here 是关于 Gatsby 的讨论，关于我遇到的相同问题。但是认识到这是一个支持问题，而不是错误，并且该问题已因陈旧而关闭，我在这里问。我在该页面上尝试了两种建议的解决方案均无济于事，而且 Gatsby 没有关于路径前缀和到达路由器的文档。

一个建议的解决方法是使用__PATH_PREFIX__ 作为到达路由器的基本路径，并声称 Gatsby 将其设为全局变量。这似乎不是真的。在站点中，我打开开发控制台并输入__PATH_PREFIX__，它是未定义的。

其他修复也不起作用。

这不可能是一个现有的错误，因为不可能 100% 的使用 Gatsby 的人都在文档根目录上服务，只有静态页面而没有动态页面受到身份验证的保护。

【问题讨论】：

标签： reactjs gatsby reach-router

【解决方案1】：

答案很简单，尽管很难找到。在包含路由器的文件中：

import { withPrefix } from 'gatsby'

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

这是唯一需要的改变。

【讨论】：

谢谢@user1713450 我没有注意到使用withPrefix，它对我有用