React.js cómo agregar una variable en el parámetro de la URL
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!
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ámetrosid
ytoken
como parámetros de la cadena de consulta. Por lo tanto, tu enlace debería verse así:Luego, en tu componente ResetPwPage, puedes usar
queryString
para analizar los valoresid
ytoken
de la cadena de consulta y utilizarlos según sea necesario. Aquí tienes un ejemplo:¡Espero que esto te ayude! Avísame si tienes alguna otra pregunta.