React app opens new tab with wrong url, https instead of https:

Question

I am using Link from react-router-dom package to make my semantic-ui-react <Dropdown.Item> component open in new tab some url. First my problem was that when I was clicking on this component, in new tab, url that I wanted to go to was appended to my localhost route, and I found the solution here on SO: https://stackoverflow.com/a/47447458/5833816. There it says that I should add // before my url, so not 'https://someurl.com' but '//https://someurl.com'

But applying this solution did not help entirely. Now in new tab url is not appended to already existing localhost url but instead of being opened with 'https://someurl.com' it opens 'http//someurl.com' - so, without :

Here is code: Component:

<Dropdown.Item
    as={Link}
    to={url} // url was 'https://someurl.com', now is '//https://someurl.com'
    target={newTab ? '_blank' : ''} // newTab's value is true
    replace={newTab}
    className='contextDropdownItem'
    onClick={onClick}
    disabled={disabled}
  >

When I click on this dropdown menu item browser opens new tab, but url is http//someurl.com without :

Version of semantic-ui-react: 0.81.1, react: 16.4.1, react-router-dom: 4.3.1

I guess you should fill url as `url = "//someurl.com"` As well as change `to={url}` to `href={url}` — r3dst0rm, Sep 24 '18 at 08:11
Might be related to the fact that `someurl.com` does not have https supports and redirects traffic to http. ``` $ curl -L https://someurl.com -I HTTP/1.1 302 Found Connection: Keep-Alive Keep-Alive: timeout=5, max=100 Location: http://someurl.com/?_xas=1fad09881044b512dd2cf83e7015c8e19e0bd774 Strict-Transport-Security: max-age=0; includeSubDomains Date: Mon, 24 Sep 2018 09:37:34 GMT ``` — Kostas Pelelis, Sep 24 '18 at 09:39
hi, first, you already specify the protocol in your url, so no need to prepend `//`, its used to indicate absolute url or relative url, regardless of protocol. second, the linked question uses `` which translate to `` that already have default onclick action, while you are using ``, i'm not a react expert, but i believe this component don't translate to ``, and you have its onlick event manually binded to a function, check that function to see if you are redirecting the browser properly — am05mhz, Aug 29 '19 at 07:50

score 0 · Answer 1 · answered Oct 01 '18 at 21:46

0

React-router doesn't support external links. Check out React-Router External link for a few ideas of how to get around this, but I tend to use standard <a href='...'>.

answered Oct 01 '18 at 21:46

R. Wright

764
3
9

React app opens new tab with wrong url, https instead of https:

1 Answers1