Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove "/app" from route in gatsby

Tags:

reactjs

gatsby

I have setup gatsby project and my routes only works when it contains /app because of this gatsby nodejs file.

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

I need to remove /app from my all the components. Is it possible to do so?

And also on production mode my dynamic routes does not work what is the issue?

const App = () => (
  <Layout>
    <Router>
      <VerifyToken path="/app/:token"/>
      <MagicLink path="/app/link/:magicLink"/>
    </Router>
  </Layout>
)
like image 862
Profer Avatar asked Apr 23 '19 08:04

Profer


People also ask

How does Gatsby handle routing?

During the build process, Gatsby creates paths to access pages, handling routing for you. Creating navigation for a Gatsby app requires an understanding of what those paths are and how they're generated. Often your application will include routes that are not known at build time.

What are client only routes?

Understanding client-only routesClient-only routes will exist on the client only and will not correspond to index. html files in an app's built assets in the /public directory. If you'd like site users to be able to visit client routes directly, you need to set up your site to handle those routes appropriately.


2 Answers

The code in your gatsby-node.js file is used to create what's called "client only routes". In the Gatsby docs they give an example that is used to create routes available only to logged-in users. These routes will exist on the client only and will not correspond to files in an app’s built assets on the server.

You could possibly eliminate the /app route if nothing is using it. But just based on the example component you posted, it does seem like your app is using it, and you did mention "dynamic routes". So you do need something to identify those routes and make them special to Gatsby.

In short, what this "client only route" is supposed to mean is that Gatsby will not create any server side pages for that route. But then you are supposed to create app components (mostly likely React components) that will respond to that route and build the content dynamically.

There is nothing special about the /app prefix. You can make it whatever you want as long as it is consistent between your Gatsby config and your client components and the router your client uses (hopefully Gastby's already built-in @reach/router?). But to create a hybrid app where some content is rendered server side by Gatsby and some content rendered dynamically client side, I'm pretty sure you need to have some kind of prefix to make that work so Gatsby can tell the difference between the two and how to render them. However, it's not clear from the Gatsby docs on page matchPath how that works. From the code example in the Gatsby docs, it does take a regular expression. It's possible that instead of /app you could try to match some other string somewhere else in the path instead of being at the beginning of the path. Whatever you do, the client side router will need to be set up to match that route too.

I don't think the Gatsby docs are that great so I can understand your struggle trying to get this to work. This Gatsby Mail App might help you to since it uses a different prefix (/threads) and has the complete source to an app that uses client side dynamic pages + static content.

And also on production mode my dynamic routes does not work what is the issue?

Very hard to tell with the limited code you provided. That doesn't look like it's the full source to that component. Is your component named src/pages/app.js or src/pages/app/index.js? That's what it needs to be named to handle the routing for the /app prefix.

like image 93
Todd Chaffee Avatar answered Nov 16 '22 03:11

Todd Chaffee


To enable client-only routes with no prefix (no /app), you setup Gatsby as below.

In gatsby-node.js:

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

In index.js:

const IndexPage = () => {
  return (
    <Router>
      <Home path="/" />
      <OtherPage path="/other-page" />
    </Router>
  )
}

export default IndexPage
like image 20
INT Avatar answered Nov 16 '22 02:11

INT