如何使用 Styled Components link 到外部站点？

Question

如果可能的话，我想在此代码中将 link 添加到另一个网站，我该怎么做？想将其添加到立即预订按钮而不更改其当前格式。想知道是否可以通过该按钮直接 link 到另一个页面？

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;
  }
`

Answer 1

没有看到组件 NavBtnLink 在做什么然后解决方案：

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

会起作用。

编辑

根据编辑和查看 LinkRouter 如果您在每个内存中使用 React Router，您可以这样做：

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

如何使用 Styled Components link 到外部站点？

How to link to an external site with Styled Components?

reactjs

hyperlink

styled-components

external

编辑