Este es mi archivo Index.js :
import { StrictMode } from "react"; import ReactDOM from "react-dom"; import { render } from "react-dom"; import { BrowserRouter,Route,Routes } from "react-router-dom"; import Projects from "./Pages/Projects"; import Experience from "./Pages/Experience"; import App from "./App"; const rootElement = document.getElementById("root"); render( <BrowserRouter> <Routes> <Route exact path="/" element={<App />} /> <Route exact path="/Experience" element={<Experience />} /> <Route exact path="/Projects" element={<Projects />} /> </Routes> </BrowserRouter>, rootElement );Así es como estoy tratando de cambiar el enlace:
import React from "react"; import { useFrame } from "@react-three/fiber"; import Eliptical from "./Eliptical"; import { Html } from "@react-three/drei"; import {Link} from "react-router-dom"; export default function Planet({ planet: { color, xRadius, zRadius, size, speed, offset,Name = ""} }) { ... return ( <> <mesh ref={planetRef} onClick={(e) => { <Link to="/Projects"></Link>El problema es que registra el clic pero no redirige la página. Las páginas están configuradas, por lo que cuando accedo a "url.com/Experience" se procesa, pero no puedo cambiar la URL cuando hago clic.
No puede llamar a JSX en un controlador de eventos como este y esperar que haga algo. En su caso, debe usar el useNavigate y emitir una navegación imperativa.
import { useNavigate } from 'react-router-dom'; export default function Planet({ planet: { color, xRadius, zRadius, size, speed, offset,Name = ""} }) { const navigate = useNavigate(); ... return ( <> <mesh ref={planetRef} onClick={(e) => { navigate("/Projects");