CODEWITHSUNDEEP
reactjs
Blazing
Blazing

Reputation: 95

How to open a component in another window with React?

I am trying to make a component page open in another window when I click a button. I have tried using window.open(<Contact />), however that does not seem to work.

I am trying to make it so that the <button>Contact me!</button> opens that component in a full window. Is there a way to do that?

ContactMe.jsx:

import '../App.css';
import Contact from './Contact';
import { ReactComponent as LinkedInLogo } from '../images/linkedin.svg';

function ContactMe() {

    return(
        <>
        <div className='contact-container' id='contactMe'>
            <div className='contact-box'>
                <h1>Want to connect?</h1>
                <button id='contact-me-btn'>Contact Me!</button>
                <a>
                    <LinkedInLogo title='LinkedIn Profile' id='linkedinprofile-svg'/>
                </a>
            </div>
            <div className='contact-container-footer'>
                <h7>Designed and built by <a href='https://github.com/BlazingIsFire' target='_blank' title='Github'>Andrew Schweitzer</a>.</h7>
            </div>
        </div>
        </>
    )   
}

export default ContactMe;

Upvotes: 0

Views: 396

Answers (1)

TanmayKr
TanmayKr

Reputation: 33

First create Route for the component tab

<Route path="/Contact" element={<Contact />}> // if you are using router v6

To open the link in a new tab, use the element by passing a target attribute with a value _blank. Like this

<a href="/Contact" target="_blank"> <button>Contact Me </button></a>

Upvotes: 1

Related Questions