1

This is my Index.js file:

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
);

This is how I am trying to change the link:

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>

The issue is It registers the click but does not redirect the page. The pages are setup so when I access "url.com/Experience" it does render but I cant change url when I click.

1 Answers1

0

You can't call JSX in an event handler like this and expect it to do anything. In your case you should use the useNavigate hook and issue an imperative navigation.

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");
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • I get a new error : useNavigate() may only be used in the context of a Router component –  Nov 14 '21 at 01:33
  • @cutecucumber Oh, sorry, just now saw your comment. That error says you are not rendering this `Planet` component within a routing context, in other words, it isn't rendered as a descendent of a `Router` component. – Drew Reese Nov 16 '21 at 15:52
  • @cutecucumber Has this answer helped answer/resolve your question/issue? – Drew Reese Nov 23 '21 at 16:06