Question

0

45

Vistas

React router Dom Link does not change URL

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.

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-10T11:13:25.754Z

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