React router Dom Link does not change URL

Question

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.

Answer 1

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