How to use div like link to redirect to another page?

Question

I need to make div which will act simulate to Link element, so when you click on it you navigate to another page.

Something like this

<Link to="/employees">
   ...  
</Link>

But it has to be div.

I could use onClick but when I use it, I should use whole path https://pro.websire.com/employees. I don't want to use it because we have different versions of website.

So path should be exactly like in Link element

<div onClick={to('/employees')}>
  ...
</div>

Does anyone know is it possible to do ?

@VLDCNDN Yes, sorry didn't know how to call it properly. I need my link to be like this /# in div element. Just like in Link — Karina Shulan, May 02 '22 at 09:04
Wrap it in [``](https://stackoverflow.com/questions/5320404/wrap-link-a-around-div) like a normal link. — Lain, May 02 '22 at 09:04
Are you using `react-router`? Your `Link` is kind of similar with it @KarinaShulan — Nick Vu, May 02 '22 at 09:07
For correct HTML semantics and web accessibility you should definitely still be using the `Link`, or anchor tag, for linking to other pages. You can still use a `div` element, but wrap it in the `Link` component. If you ***must*** use the `div` element alone then be sure to add the correct accessibility attributes and styling. — Drew Reese, May 02 '22 at 15:22

Arky Asmal · Accepted Answer · 2022-05-07T06:53:37.300

3

If you are using react router, you can programmatically navigate using the useNavigate hook. Inside your component, you need to do the following.

const LinkComponent = () =>{
    const navigate = useNavigate()
    return(<div onClick={() => navigate("/home")}>Link </div>)
}

edited May 07 '22 at 06:53

answered May 02 '22 at 09:14

Arky Asmal

1,162
4
10

How to use div like link to redirect to another page?

1 Answers1