如何将所有路由重定向到Gatsby索引 [英] How to redirect all routes to gatsby index

问题描述

我正在尝试创建一个Gatsby项目，该项目只有一个页面来处理所有路由。我有一个这样的索引页：

const App = () => {
  return <Router>
    <Home path="/"/>
    <Login path="/login" />
    <Content path="/content" />
  </Router>
}

在src/pages文件夹上，我只有index.js

如何使此页面处理所有路由？

查看Gatsby文档(https://www.gatsbyjs.com/docs/client-only-routes-and-user-authentication/)我知道我可以像这样使用插件gatsby-plugin-create-client-paths：

{
  resolve: `gatsby-plugin-create-client-paths`,
  options: { prefixes: [`/app/*`] },
},

如果我使用Reaction路由器创建一个名为app.js的页面，则可以很好地工作。因此，所有路线/app/*都转到此页面。

但是我如何在根url：/上进行这种重定向呢？我希望使任何/*路由都指向索引页：index.js

对如何做到这一点有什么建议？：)

推荐答案

设置index.js如下：

const IndexPage = () => {
  return (
    <Router>
      <Home path="/"/>
      <Login path="/login" />
      <Content path="/content" />
    </Router>
  )
}

export default IndexPage

和gatsby-node.js中：

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  if (page.path === `/`) {
    page.matchPath = `/*`
    createPage(page)
  }
}

重新启动gatsby develop，索引页将处理您设置的路线。

这篇关于如何将所有路由重定向到Gatsby索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！