Using React Router with different tag

Question

React Router has a Link component with generates an HTML <a> element.

I need to generate an <area href=... >.

How can I do it?

Answer 1

You can have Link as child to your component.

<area>
    <Link 
       to={'/path/to/somehwhere}'}>
       Click Me
    </Link>
</area>

Or you can specify a onclick event handler on area and use hashHistory or browserHistory from react-router to manually navigate user to desired location.

<area onClick={handleClick}>
     // your code here
</area>

and handleClick will have

handleClick = (): void => {
    hashHistory.push('/path/to/somehwhere'); // or browserHistory
}

In these both ways you can achieve your desired behavior. You can read more about navigating users programmatically here.

Edit: I forgot to mention that you can also wrap your whole component inside Link.

<Link to='/path/to/somewhere'>
     <area />
</Link>