How to link to an external site with Styled Components?

Question

I want to add a link to another website in this code if possible, how would i go about doing this? wanted to add it to the booking now button without changing the current formatting of it. wondering is it possible to directly link to another page through that button or not?

import React from 'react'
import {FaBars} from 'react-icons/fa';
import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks, NavBtn, NavBtnLink} from './NavbarElements';

const Navbar = ({ toggle }) => {
    return (
        <>
            <Nav>
                <NavbarContainer>
                    <NavLogo to='/'>SJMOT</NavLogo>
                    <MobileIcon onClick={toggle}>
                        <FaBars />
                    </MobileIcon>
                    <NavMenu>
                        <NavItem>
                            <NavLinks to="about">About</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to="discover">Discover</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to="contact">Contact Us</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to="services">Services</NavLinks>
                        </NavItem>
                        <NavBtn>
                            <NavBtnLink to="https://sjmmot.bookingcommerce.com" >Book Now</NavBtnLink>
                        </NavBtn>
                        
                    </NavMenu>
                    
                </NavbarContainer>
            </Nav>
        </>
        );
};

export default Navbar

...

export const NavBtnLink = styled(LinkRouter)`
  border-radius: 50px;
  background: #1d70b8;
  white-space: nowrap;
  padding: 10px 22px;
  color: #010606;
  font-size: 16px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;

  &:hover{
    transition: all 0.2s ease-in-out;
    background: #fff;
    color: #010606;
  }
`

Does this answer your question? [How to make a hyperlink external in react?](https://stackoverflow.com/questions/50350085/how-to-make-a-hyperlink-external-in-react) — Jim G., Apr 06 '22 at 15:35
Please make an [edit] to clarify the issue you have because I do not see why the linked question wouldn't work in your instance. If you're using React Router than there are options but your question is unclear. — DᴀʀᴛʜVᴀᴅᴇʀ, Apr 06 '22 at 15:36
@DᴀʀᴛʜVᴀᴅᴇʀ added my code into the thing, sorry new to this site — KavXd, Apr 06 '22 at 15:48
@DᴀʀᴛʜVᴀᴅᴇʀ `export const NavBtnLink = styled(LinkRouter)` border-radius: 50px; background: #1d70b8; white-space: nowrap; padding: 10px 22px; color: #010606; font-size: 16px; outline: none; border: none; cursor: pointer; transition: all 0.2s ease-in-out; text-decoration: none; &:hover{ transition: all 0.2s ease-in-out; background: #fff; color: #010606; } `` — KavXd, Apr 06 '22 at 15:52
Often, libraries only support navigating to relative paths (within your website). To navigate to an external website, you may need to directly set window.location.href. Add a click handler and do that, should solve the issue. — Dave, Apr 06 '22 at 15:54

score 0 · Accepted Answer · answered Apr 06 '22 at 15:54

0

Without seeing what the component NavBtnLink is doing then the solution of:

<NavBtnLink>
  <a href="https://sjmmot.bookingcommerce.com" target="_blank" rel="noopener noreferrer">
    Book Now
  </a>
</NavBtnLink>

would work.

Edit

Based on the edit and seeing LinkRouter if you're using React Router per memory you could do:

<NavBtn>
  <NavBtnLink to={{ pathname: `https://sjmmot.bookingcommerce.com`}} target="_blank">Book Now</NavBtnLink>
</NavBtn>

answered Apr 06 '22 at 15:54

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

This just reopens the same page, however the url has added the pathname. do i need to import anything such as reactrouter onto this page or not? – KavXd Apr 06 '22 at 16:03
Yes in Styled Components you should use `import { LinkRouter } from "react-router-dom"` at the top of the *NavBtnLink.js* file. – DᴀʀᴛʜVᴀᴅᴇʀ Apr 06 '22 at 16:07

How to link to an external site with Styled Components?

1 Answers1

Edit