mesh onClick event as redirect link

[bolti95]

Hi, I am trying to create a mesh with a function attached to redirect user to another page. What is the best way for me to do this? I have tried a few methods, including useHistory

Imported as:
import { Redirect, useHistory } from 'react-router-dom';
In the functional component:

    const history = useHistory();
    const handleClick = useCallback(() => history.push('/sample'), [history]);

The mesh:

        <mesh
        {...props}
        ref={mesh}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
        onClick={handleClick}
        scale={props.scale}
        castShadow
      >

Error I am getting is "Cannot read property 'push' of undefined", is this because I have not imported history properly?

https://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link using this as a reference, could I implement useState and Redirect instead of history?

Thanks for your help

[drcmda]

context cannot pierce from on renderer into another in react. either use a context bridge https://github.com/pmndrs/drei#usecontextbridge and for this react-router must expose their context somehow, or use a router is not constrained by context like wouter: https://codesandbox.io/s/r3f-wouter-routes-7kohn

[forerunrun]

Hey @drcmda are there any examples of wouter being used with drei instances or would you know if this is currently possible? Eg clicking on an instance + Link would route to the relative page?