Material-UI Button Component Doesn't Work Properly After Deploy On Github Pages

06 September 2018 - 1 answer

<Button href={node.slug}>
  <span>Read more</span>
</Button>

So basically this is a button in a Card component, i don't think more code would present more meaning, please ask for more if needed. The node.slug variable is something like "product-name". In local environment works fine, but not after deployment on Github pages.

This is a button on a product-category page(i.e. /tools or /maintenance), clicking the button the first time, takes me to:

xxx.github.io/project-name/product-name/

Issue is that after i go back and then click the button again, /product-category/ gets added to the URL:

xxx.github.io/project-name/product-category/product-name/

This is not the link i want to be at, as there is no page here. The first URL is where i want to be, as that's the URL type where products are at. /product-category/ will not go away unless i click the Home Page button.

Answer

If I infer correctly node.slug is something like "product-name".

That means that it is not an absolute path, and therefore you can interpret it as ./product-name.

Try with:

<Button href={`/project-name/${node.slug}`}> ... </Button>

Another approach would be to change your base href of your pages. Add a <base> element in you <head>:

<head>
  ...
  <base target="_blank" rel="nofollow noreferrer" href="http://xxx.github.io/project-name/">
</head>

Then all your non-absolute hrefs will start from that base.

Don’t forget to add a / at the end of the base’s href!

source: stackoverflow.com

← Previous Post

Material-UI Button Component Doesn't Work Properly After Deploy On Github Pages

06 September 2018 - 1 answer

Answer

Related Questions