KPC
Kevin Powell - Community•6d ago
Kingpin

React router dom

export const router = [ { index: true, element: <Home />, icon: null, }, { path: '/configure', element: <Configurator />, icon: null, children: [ { path: ':meshName', element: <MeshConfigurator />, } ] }, { path: '/cart', element: <Card />, icon: "bag", }, { path: '*', element: <NotFoundPage />, icon: null, } ] Have been having troubles to add tags floating around a 3D model, when clicking the user should navigate towards /configure/{nameMesh}, the tags won't appear due to this error react-router-dom.js?v=51891cf4:9648 Uncaught TypeError: Cannot destructure property 'basename' of 'React10.useContext(...)' as it is null. at LinkWithRef (react-router-dom.js?v=51891cf4:9648:11) at Object.react_stack_bottom_frame (chunk-XYGCQEHB.js?v=51891cf4:18509:20) at renderWithHooks (chunk-XYGCQEHB.js?v=51891cf4:5654:24) at updateForwardRef (chunk-XYGCQEHB.js?v=51891cf4:7198:21) at beginWork (chunk-XYGCQEHB.js?v=51891cf4:8735:20) at runWithFiberInDEV (chunk-XYGCQEHB.js?v=51891cf4:997:72) at performUnitOfWork (chunk-XYGCQEHB.js?v=51891cf4:12561:98) at workLoopSync (chunk-XYGCQEHB.js?v=51891cf4:12424:43) at renderRootSync (chunk-XYGCQEHB.js?v=51891cf4:12408:13) at performWorkOnRoot (chunk-XYGCQEHB.js?v=51891cf4:11827:37) <Link> ConfigurateOptions @ ConfigurateOptions.t…?t=1763286725345:23
No description
2 Replies
Kingpin
KingpinOP•5d ago
The tags appear in my useControls panel But not visually 
import {Html} from '@react-three/drei';
import * as THREE from 'three';
import {Link} from "react-router-dom";
import {useControls} from "leva";

type MeshAnnotationProps = {
    scene: THREE.Group | THREE.Object3D;
    meshName: string;
    positionOffset?: [number, number, number];
}

function ConfigurateOptions({scene, meshName, positionOffset = [0, 0.1, 0]}: MeshAnnotationProps) {
    const targetMesh = scene.getObjectByName(meshName);

    if (!targetMesh) return null;

    const {offset} = useControls(`Tag: ${meshName}`, {
        offset: {
            value: positionOffset,
            step: 0.01,
            label: 'Offset'
        },
    });

    return (
        <group position={offset}>
            <Html
                distanceFactor={5}
                zIndexRange={[100, 0]}
            >
                <Link to={`/configure/${meshName}`} className={"c-tag"}>
                    {meshName}
                </Link>
            </Html>
        </group>
    );
}

export default ConfigurateOptions;
import {Html} from '@react-three/drei';
import * as THREE from 'three';
import {Link} from "react-router-dom";
import {useControls} from "leva";

type MeshAnnotationProps = {
    scene: THREE.Group | THREE.Object3D;
    meshName: string;
    positionOffset?: [number, number, number];
}

function ConfigurateOptions({scene, meshName, positionOffset = [0, 0.1, 0]}: MeshAnnotationProps) {
    const targetMesh = scene.getObjectByName(meshName);

    if (!targetMesh) return null;

    const {offset} = useControls(`Tag: ${meshName}`, {
        offset: {
            value: positionOffset,
            step: 0.01,
            label: 'Offset'
        },
    });

    return (
        <group position={offset}>
            <Html
                distanceFactor={5}
                zIndexRange={[100, 0]}
            >
                <Link to={`/configure/${meshName}`} className={"c-tag"}>
                    {meshName}
                </Link>
            </Html>
        </group>
    );
}

export default ConfigurateOptions;
This is the react component for it. I fixed it wait nvm, I fixed the routing not the tags not being shown soo apparently you can't use Link components within Drie text.
Kingpin
KingpinOP•5d ago
WOOOHOOO
No description

Did you find this page helpful?