Parameter 'href' should represent a valid URL

Question

I'm using next js and using react-share for share a page. My problem is when I try to share a page then show me error like this:

Parameter 'href' should represent a valid URL

I don't know why.

I have tried like this way:

import {FacebookIcon, FacebookShareButton, FacebookShareCount} from 'react-share'

const shareUrl = global.window && window.location.href;


 <FacebookShareButton
        url={`${shareUrl}`}
        title={blog.title}
        className="Demo__some-network__share-button">
        <FacebookIcon
          size={32}
          round />
      </FacebookShareButton>

any suggestion please

Answer 1

If you use the && operator and the condition is false, shareUrl value will be false and the url prop needs to be a string so you need to do something like this:

const shareUrl = window?.location.href ?? '';

In this case the window?. is telling js that if the window object is undefined or null you will return the empty string instead of false.

Answer 2

That happens when you are developing on localhost (https://github.com/nygardk/react-share/issues/432)

Try to deploy it on a development server to test it