I'm trying to create a ResetPassword view on my react front-end app, I have a router file just like this:
import '../App.css';
import { Route, Routes } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import Home from '../Pages/Home';
import Inicio from '../Pages/Inicio';
import UsuarioLog from '../Pages/UsuarioLog';
import EditarUsuarioLog from '../Pages/EditarUsuarioLog';
import DatosExpediente from '../Pages/DatosExpediente';
import PersonaResponsable from '../Pages/PersonaResponsable';
import EditarDatosExpediente from '../Pages/EditarDatosExpediente';
import EditarParentezco from '../Pages/EditarParentezco';
import Convivencia from '../Pages/Convivencia';
import EditarConvivencia from '../Pages/EditarConvivencia';
import DatosSocioEconomicos from '../Pages/DatosSocioEconomicos';
import EditarDatosSE from '../Pages/EditarDatosSE';
import FactorPsicosocial from '../Pages/FactorPsicosocial';
import EditarFactor from '../Pages/EditarFactor';
import CalificacionRiesgo from '../Pages/CalificacionRiesgo';
import EditarCalificacionRiesgo from '../Pages/EditarCalificacionRiesgo';
import EstadoExpendiente from '../Pages/EstadoExpediente';
import EditarEstadoExp from '../Pages/EditarEstadoExp';
import ReporteExpediente from '../Pages/ReporteExpediente';
import Acciones from '../Pages/Acciones';
import Error404 from '../Pages/Error404';
import Resgistrarse from '../Pages/Registrarse';
import ForgotPass from '../Pages/ForgotPass';
import Pascientes from '../Pages/Pascientes';
import EditarPasciente from '../Pages/EditarPasciente';
import PerfilEntrada from '../Pages/PerfilEntrada';
import EditarPerfilEntrada from '../Pages/EditarPerfilEntrada';
import PerfilSalida from '../Pages/PerfilSalida';
import EditarPerfilSalida from '../Pages/EditarPerfilSalida';
import EncuestaSatisfaccion from '../Pages/EncuestaSatisfaccion';
import Encuestas from '../Pages/Encuestas';
import ResetPass from '../Pages/ResetPass';
function Router() {
return (
<Routes>
<Route index element={<Home />} />
<Route path="/Inicio" element={<Inicio />} />
<Route path="/Registrarse" element={<Resgistrarse />} />
<Route path="/ForgotPass" element={<ForgotPass />} />
<Route path="/Pascientes" element={<Pascientes />} />
<Route path="/EditarPasciente" element={<EditarPasciente />} />
<Route path="/PerfilEntrada" element={<PerfilEntrada />} />
<Route path="/EditarPerfilEntrada" element={<EditarPerfilEntrada />} />
<Route path="/PerfilSalida" element={<PerfilSalida />} />
<Route path="/EditarPerfilSalida" element={<EditarPerfilSalida />} />
<Route path="/EncuestaSatisfaccion" element={<EncuestaSatisfaccion />} />
<Route path="/Encuestas" element={<Encuestas />} />
<Route path="/UsuarioLog" element={<UsuarioLog />} />
<Route path="/EditarUsuarioLog" element={<EditarUsuarioLog />} />
<Route path="/DatosExpediente" element={<DatosExpediente />} />
<Route path="/PersonaResponsable" element={<PersonaResponsable />} />
<Route
path="/EditarDatosExpediente"
element={<EditarDatosExpediente />}
/>
<Route path="/EditarParentezco" element={<EditarParentezco />} />
<Route path="/Convivencia" element={<Convivencia />} />
<Route path="/EditarConvivencia" element={<EditarConvivencia />} />
<Route path="/DatosSocioEconomicos" element={<DatosSocioEconomicos />} />
<Route path="/EditarDatosSE" element={<EditarDatosSE />} />
<Route path="/FactorPsicosocial" element={<FactorPsicosocial />} />
<Route path="/EditarFactor" element={<EditarFactor />} />
<Route path="/CalificacionRiesgo" element={<CalificacionRiesgo />} />
<Route
path="/EditarCalificacionRiesgo"
element={<EditarCalificacionRiesgo />}
/>
<Route path="/EstadoExpediente" element={<EstadoExpendiente />} />
<Route path="/EditarEstadoExp" element={<EditarEstadoExp />} />
<Route path="/ReporteExpediente" element={<ReporteExpediente />} />
<Route path="/Acciones" element={<Acciones />} />
<Route path="/Error404" element={<Error404 />} />
<Route
path="/ResetPassword/:token"
element={<ResetPass />}
/>
</Routes>
);
}
export default Router;
In the route
<Route path="/ResetPassword/:token" element={<ResetPass />}/>
I need to get a reset token from the URL, for this I'm using the useParams hook.
I can get the token from the URL without problem, the issue is, if I add the /:token to my route, the styles stop rendering, if I leave the route as "/ResetPassword" it renders as normal and shows all the styling.
For the last, this is my component
import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
export default function ResetPass(props) {
const params = props;
const [Contrasena, setContrasena] = useState('');
const [ConfirmaContrasena, setConfirmaContrasena] = useState('');
const handleContrasenaChange = (event) => {
setContrasena(event.currentTarget.value);
};
const handleConfirmaContrasenaChange = (event) => {
setConfirmaContrasena(event.currentTarget.value);
};
const token = params.token;
const navigate = useNavigate();
const handleSubmit = async (event) => {
event.preventDefault();
try {
const data = {
Contrasena,
ConfirmaContrasena,
};
console.log(token);
const route = `http://localhost:3000/users/resetPassword/${token}`;
const response = await axios.patch(route, data);
console.log(response);
if (!response.ok) {
const message = `An error has occured: ${response.statusText}`;
window.alert(message);
navigate('/');
return;
}
if (!response) {
window.alert(`Record id: ${token} not found`);
navigate('/');
return;
}
setContrasena('');
setConfirmaContrasena('');
} catch (err) {
console.log(err);
}
};
return (
<React.Fragment>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1>{props.token}</h1>
<h1 class="h4 text-gray-900 mb-2">
Resetea tu contraseña
</h1>
<p class="mb-4">
Ingrese su contraseña y su confirmacion de contraseña
</p>
</div>
<form class="user" onSubmit={handleSubmit}>
<div class="form-group">
<input
type="password"
class="form-control form-control-user"
name="Contraseña"
placeholder="Ingrese su contraseña"
value={Contrasena}
onChange={handleContrasenaChange}
/>
<br />
<input
type="password"
class="form-control form-control-user"
name="ConfirmaContraseña"
placeholder="Confirme su contraseña"
value={ConfirmaContrasena}
onChange={handleConfirmaContrasenaChange}
/>
</div>
<button
type="submit"
class="btn btn-primary btn-user btn-block"
>
Ingresar
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
Any advice?
