CODEWITHSUNDEEP
javascriptreactjsreact-routergatsby
Mehdi Faraji
Mehdi Faraji

Reputation: 3806

How to push to url in gatsby js?

In react I've used to push with history prop like this :

 <button onClick={() => props.history.push('/someurl')} >

I tried this way but it doensn't work :

import { navigate } from '@reach/router';

<button onClick={ () => navigate(`/`);} > Navigate < / button>

Error :

Gatsby.js development 404 page

There's not a page yet at /

I've also tried this url :

navigate(`localhost:8000/`);

But it throws this error in the console :

Failed to launch 'localhost:8000/' because the scheme does not have a registered handler.

It says the page doesn't exist but it does and I've checked it by putting the same url in browser and it does exist .

How can I push something to url in gatsby ?

Upvotes: 0

Views: 1418

Answers (1)

coreyward
coreyward

Reputation: 80041

Instead of importing navigate from @reach/router, use the Gatsby-provided wrapper:

import { navigate } from "gatsby"

const HomeButton = () => 
  <button onClick={() => navigate("/")}>
    Homeward!
  </button>

If you want to change the URL without keeping the previous page in history you can also pass the second argument an options object with replace set to a truthy value. E.g.:

const HomeButton = () => 
  <button onClick={() => navigate("/", { replace: true })}>
    Homeward!
  </button>

Upvotes: 4

Related Questions