CODEWITHSUNDEEP
reactjsroutesgatsby
jsdbt
jsdbt

Reputation: 313

Programmatically navigate to a dynamic url with gatsby

I am using navigate to move to another URL. I saw many posts using Link to move to another page with dynamic url. But I want to change url without writing jsx

When I navigate to the following url, I get a 404 error

navigate(`/vidx/${u}`, {
      state: { vid: r }
    })

I changed gatsby-node.js to following, still getting the same error. I have a file named vidx.js in pages folder

exports.onCreatePage = async ({ page, actions }) => {   
    const { createPage } = actions
    if (page.path.match(/^\/vidx/)) {
      page.matchPath = "/vidx/*";
      createPage(page); 
    } 
}

My url will look like this - www.xyz.com/vidx/123456789. The number 123456789 will depend upon the user logged in

Upvotes: 1

Views: 870

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

I want to redirect to vidx.js; but the URL should be /vidx/123456789

That will never work since /vidx/123456789 will always throw a 404 error since it's not generated and doesn't exist, it's a separate new page.

One easy thing you can do use: /vidx?queryParameter=123456789. In that case, your page will remain being /vidx and you can get the queryParameter to make your stuff with your own logic.

Upvotes: 1

Related Questions