Блог

Я кодирую регистрацию с помощью React.js Узел (экспресс) MongoDB. Все мои шаги работают: моя консоль.log() работает спереди, затем сзади, затем снова спереди. Мой «новый пользователь» хорошо записан в моей базе данных (MongoDB) после подписки. Так что все в порядке, кроме Страница немедленно «прыгает» обратно.

Действительно, у меня есть Итак, у меня есть «Новый пользователь» в базе данных (отлично!), Но мой редирект спереди не работает.

Я пытался :

 return <Redirect to='/home' />
return <Redirect push to='/home' />
return <Link to='/home' />
 

…

Я чувствовал, что это проблема с @ или специальным символом в любом вводе, потому что я преуспел в процессе ввода без какой-либо базы данных, но, похоже, причина не в этом.

React.js : регистрация.Крюк jsx :

   const [email, setEmail] = useState('');
 

затем пример ввода

 <Input
    type='email'
    style={style.inputEmail}
    onChange={(e) => setEmail(e.target.value)}                                         
/>
 

затем функция hook для управления серверной частью

 const [userConnected, setUserConnected] = useState(false)



const handleSubmitForm = async () => {
    
    const data = await fetch('/users/form', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: `email=${email}amp;password=${password}`
    })
    const body = await data.json();
 
    if(body.integrationBDD){
        setUserConnected(true)
    }  
}

if(userConnected){
   return <Redirect push to='/home' />
}
 

• import { Redirect, useHistory } from "react-router-dom";

app.js

 <Router>
      <div className="page-container">
        <NavBar />
         <Switch>
          <Route exact path="/"  component={Admin} />
          <Route exact path="/home"  component={Home} />
        ..
 

Пожалуйста, обратите внимание, что когда «Вопросительный знак кажется странным ?

Предполагая, что вы используете react-маршрутизатор, я думаю, что вы можете использовать крючок истории использования здесь. Например:

 const [userConnected, setUserConnected] = useState(false);
const history = useHistory();

const handleSubmitForm = async ()=> {
   if(body.integrationBDD){
      history.push("/home"); //or history.push("/");
   }
}
 

источник: https://reactrouter.com/web/api/Hooks