React Link to open new tab

Question

I Have a React link in my material table.

  actions={[
         rowData => ({
               icon: () => <Link   style={{ fontSize:"15px" ,fontSize:'15px'}} to={{pathname:'/VV',state: rowData  }} >View</Link> ,
               onClick: (rowData)
             })
           ]}

I want to be able to open a new tab on the click.

But my child objects keep getting Cannot read properties of undefined when i decide to open it in a new tab

Please can i have some assistance i've been stuck on this problem.

score 0 · Answer 1 · answered Dec 27 '21 at 16:22

There is a simple way you can do that without React-Router library,

Make a Link component like blow and use it.

const Link = () => {
    const linkRef = useRef(null)
    const handleClick = () => {
         linkRef.current.link.click()
    }
    return (
       <div ref={linkRef} onClick={handleClick}> 
          <a href="http://google.com" target="_blank">Go to google!</a>
       </div>
    )
}

You can put the link you want in href and render the Link component where you want! also you can give it a style you want cuz it's a component! :D

I hope you find an answer!

React Link to open new tab

1 Answers1