es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React.js cómo agregar una variable en el parámetro de la URL

05 Aug, 2023 Programación

El enlace desde mi backend produce ?id= para que mi frontend analice usando queryString. ¿Hay alguna forma de cargar este enlace en el frontend?

http://localhost:3000/resetpassword/?id=61bc1fbe3490be4f3594cc3e/?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI2MWJjMWZiZTM0OTBiZTRmMzU5NGNjM2UiLCJmaXJzdG5hbWUiOiJPY2VhbiIsImxhc3RuYW1lIjoiUnlhbiIsImVtYWlsIjoib2NlYW5yeWFuNzI1QHlhaG9vLmNvbSIsInBob25lTnVtYmVyIjo2MjgxMTYxNTIyNjMyLCJkb2IiOiIyMDAwLTA3LTI1VDAwOjAwOjAwLjAwMFoiLCJwYXNzd29yZCI6IiQyYiQxMCR6Li9hMHFQYVFzdnNCUEtxc2QuaENlWmI3OWpIYW1VdHdXNmVnSEpLLlhndHFGZzV3djJ0bSIsIl9fdiI6MH0.21irj8fCPQFvCqmp-3E9BJmqwVp81gyQxIW5LgFplMg

App.js

import './App.css';
import { BrowserRouter,
         Routes,
         Route,
} from "react-router-dom"; //v6

import LandingPage from "./pages/LandingPage/LandingPage";
import ResetPwPage from "./pages/ResetPwPage/ResetPw";

function App() {
  return (
    <browserrouter>
      <routes>
        <route path="/" element=""></route><landingpage></landingpage>}/>
        <route path="/resetpassword/:id/:token" element=""></route><resetpwpage></resetpwpage>} />
      </routes>
    </browserrouter>
  );
}

export default App;

He intentado

<route path="/resetpassword/?id=:id/?token=:token" element=""></route><resetpwpage></resetpwpage>} />

Pero no funciona.

Necesito que el enlace contenga ?id= y ?token= ya que necesito obtener el valor de id y token en el frontend como se requiere con queryString.

const parsed = queryString.parse(location.search);
console.log(parsed);
// => {foo: 'bar'}

Cualquier sugerencia o alternativa es muy apreciada. ¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Aún puedes usar la ruta existente en tu archivo App.js, pero debes modificar el enlace que estás utilizando para navegar al componente ResetPwPage para pasar los parámetros id y token como parámetros de la cadena de consulta. Por lo tanto, tu enlace debería verse así:

    http://localhost:3000/resetpassword?id=61bc1fbe3490be4f3594cc3e&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI2MWJjMWZiZTM0OTBiZTRmMzU5NGNjM2UiLCJmaXJzdG5hbWUiOiJPY2VhbiIsImxhc3RuYW1lIjoiUnlhbiIsImVtYWlsIjoib2NlYW5yeWFuNzI1QHlhaG9vLmNvbSIsInBob25lTnVtYmVyIjo2MjgxMTYxNTIyNjMyLCJkb2IiOiIyMDAwLTA3LTI1VDAwOjAwOjAwLjAwMFoiLCJwYXNzd29yZCI6IiQyYiQxMCR6Li9hMHFQYVFzdnNCUEtxc2QuaENlWmI3OWpIYW1VdHdXNmVnSEpLLlhndHFGZzV3djJ0bSIsIl9fdiI6MH0.21irj8fCPQFvCqmp-3E9BJmqwVp81gyQxIW5LgFplMg

    Luego, en tu componente ResetPwPage, puedes usar queryString para analizar los valores id y token de la cadena de consulta y utilizarlos según sea necesario. Aquí tienes un ejemplo:

    import React from "react";
import queryString from "query-string";

function ResetPwPage({ location }) {
  const parsed = queryString.parse(location.search);
  const id = parsed.id; // "61bc1fbe3490be4f3594cc3e"
  const token = parsed.token; // "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI2MWJjMWZiZTM0OTBiZTRmMzU5NGNjM2UiLCJmaXJzdG5hbWUiOiJPY2VhbiIsImxhc3RuYW1lIjoiUnlhbiIsImVtYWlsIjoib2NlYW5yeWFuNzI1QHlhaG9vLmNvbSIsInBob25lTnVtYmVyIjo2MjgxMTYxNTIyNjMyLCJkb2IiOiIyMDAwLTA3LTI1VDAwOjAwOjAwLjAwMFoiLCJwYXNzd29yZCI6IiQyYiQxMCR6Li9hMHFQYVFzdnNCUEtxc2QuaENlWmI3OWpIYW1VdHdXNmVnSEpLLlhndHFGZzV3djJ0bSIsIl9fdiI6MH0.21irj8fCPQFvCqmp-3E9BJmqwVp81gyQxIW5LgFplMg"

  // Utiliza los valores de id y token según sea necesario

  return (
    <div>
      <h1>Página de restablecimiento de contraseña</h1>
      ID: {id}
      Token: {token}
    </div>
  );
}

export default ResetPwPage;

    ¡Espero que esto te ayude! Avísame si tienes alguna otra pregunta.

Comments are closed.