Estoy trabajando en la configuración del registro de usuario y me he quedado atascado en un problema en el que no puedo redirigir desde una página 'localhost:3000/activate/tokenNo.' (archivo Activation.jsx) en carga a mi página principal (archivo App.jsx) .
Aquí está mi archivo de activación.jsx:
import React, { useEffect } from 'react'; import { useNavigate } from "react-router-dom"; const Activate = () => { const navigate = useNavigate(); useEffect(() => { navigate('/') }, [navigate]) return ( <div>Activation Page</div> ) } export default Activate;Aquí está mi archivo App.jsx:
import React from 'react'; export const App = () => { return <div>Dashboard</div>; }; export default App ;Mi archivo de activaciónController.js:
exports.activationController = (req,res) => { const {token} = req.body if(token){ //Verify the token is valid or not or expired jwt.verify(token , process.env.JWT_ACCOUNT_ACTIVATION , (err , decoded) => { if(err){ return res.status(401).json({ error: "Expired Token , Signup again" }) } else{ //if valid save to database //Get name email password from token const {name , email , password} = jwt.decode(token) const user = new User({ name , email , passsword }) user.save((err,user) => { if(err){ return res.status(401).json({ error: errorHandler(err) }) } else{ return res.json({ success: true , message: "Signup successful", user }) } }) } }) } else{ return res.json({ message: "error happening please try again" }) } }En mi auth.routes.js
router.post('/activation', activationController)Recibí un error en mi consola --> index.tsx:25 No hay rutas que coincidan con la ubicación "/activate/tokenNo".
Mi carpeta de referencia --> https://github.com/Mohammed-Abdelhady/FULL-MERN-AUTH-Boilerplate
A menudo, necesitamos realizar alguna acción adicional en el renderizado de componente o página inicialmente.
Como, obtención de datos, etc.
Para implementar de esta manera, podemos usar el gancho useEffect de reaccionar e indicar nuestra ejecución en él.
No puedo ver el enlace useNavigate en la última versión de react-router-dom, así que podemos usar el enlace useHistory.
Por ejemplo:
import React, { useEffect } from "react" import { useHistory } from 'react-router-dom' const App = () => { const history = useHistory(); useEffect(() => { history.push('Page2URL') }, [history]) return ( <div>Page1</div> ) }Es posible que necesite "Navegar (a = "dónde ir") en su lugar. Dejar las dependencias abiertas en useEffect hará que el código se ejecute solo una vez en el momento de la carga. Si incluye [navegar], se ejecutará cada vez. No estoy seguro de lo que está tratando de lograr, pero Router/Routes/Route puede ser un mecanismo mejor. Si está iniciando sesión/registrándose, en su inicio de sesión tendría un enlace a su página de registro. Entonces podría configurar 2 rutas, una para iniciar sesión y otra para Registro.
import React, { useEffect } from 'react'; import { Navigate } from "react-router-dom"; const Activate = () => { useEffect(() => { Navigate( to='/'); }, []) return ( <div>Activation Page</div> ) } export default Activate;