Why is my a href not working on primary component (React)

Question

My domain is hzdigitalagency.com so basically the a href is to direct to an external site. external site is hzdigitalagency.dashclicks.com. whenever I put the a href to that it rather tries to load hzdigitalagency.com/hzdigitalagency.dashclicks.com instead of just hzdigitalagency.dashclicks.com

Here is the PrimaryButton component code

const PrimaryButton = (props) => {
  return (
    <>
    <a href={props.link}>
        <button
        className={styles.primaryButton}
        type={props.type}>
            {props.children}
        </button>
    </a>
    </>
  )
}

Here is where I am passing the link prop for the a href

<nav className='navbar'>
         <span><img src={logo} alt='home' className='logo' /></span>
         <div className={`menuMask ${isOpen && "open"}`} onClick={navButtonHandler}></div>
         <div className={`menuContainer ${isOpen && "open"}`}>
         <ul className={`navitems ${isOpen && "open"}`}>
            <a href="/" className='home'>
                <li>Home</li>
            </a>

            <Link style={navLinksStyle} to='/whowehelp'>
                <li className='whoWeHelp'>Who We Help</li>
            </Link>

            <Link style={navLinksStyle} to='/services'>
                <li className='services'>Services</li>
            </Link>

            <Link style={navLinksStyle} to='/about'>
                <li className='about' >About</li>
            </Link>

            <Link style={navLinksStyle} to='/caseStudy'>
                <li className='caseStudies'>Case Studies</li>
            </Link>

            <li>
               <PrimaryButton link={'www.hzdigitalagency.dashclicks.com'}>Client Login</PrimaryButton>
            </li>

            <Link to= "/contact">
                <ContactButton>Contact</ContactButton>
            </Link>
         </ul>
         </div>

         <div className={`navToggle ${isOpen && "open"}`}  onClick={navButtonHandler}>
            <div className='bar'>
                
            </div>
         </div>
    </nav>

I am kind of a beginner to React so any suggestions on why it is not working would be very helpful.

I think this might answer your question. https://stackoverflow.com/questions/31095759/react-router-redirect-to-a-different-domain-url — mc-user, Apr 09 '22 at 04:43
Nope , that is a whole different post about a whole different thing — Hadi Zouhbi, Apr 09 '22 at 13:22

score 0 · Accepted Answer · answered Apr 09 '22 at 01:27

0

I guess you need to add https:// or http:// to the link prop, like so: link={'http://www.hzdigitalagency.dashclicks.com'}. That should redirect you outside of your domain.

answered Apr 09 '22 at 01:27

Alon Barenboim

428
3
11

Why is my a href not working on primary component (React)

1 Answers1