React+redux-form - 提交后重定向

Posted 2023-02-22

【中文标题】React+redux-form - 提交后重定向

【英文标题】：React+redux-form - redirect after submit

【发布时间】：2017-09-27 15:53:55

【问题描述】：

我正在使用 react-router-dom v4 。表单提交成功后如何重定向到页面？

我遵循了该教程 LINK 。然后我创建了自己的提交函数：

    const submit=(email='',password='')=>
  let error=;
  let isError=false;
  if(email.trim()==='')
    error.email='Required';
    isError=true;
  
  else if(![ '[e-mail]' ].includes(email))
    error.email='User does not exist';
    isError=true;
  

  if(password.trim()==='')
    error.password='Required';
    isError=true;
  
  else if(password!=='test')
    error.password='Wrong password';
    isError=true;
  
  if(isError)
    throw new SubmissionError(error);
    
  else

      //redirect to new page
    

在评论的地方应该有一个重定向功能，但我不知道该怎么做。我试着放在那里： <Redirect to="/pageAfterSubmit" push /> 但什么也没发生。

我在 index.js 中的浏览器路由器如下所示：

<BrowserRouter >
    <Provider store=store>
        <div>
            <Route path="/"  component=LoginForm></Route>
            <Route path="/markers" component=Markers></Route>
            <Route path="/contact" component=Contact></Route>
          </div>
    </Provider >
  </BrowserRouter>

感谢您的帮助。

【问题讨论】：

试试这个：this.context.route.transitionTo('/pageAfterSubmit')

【参考方案1】：

创建一个状态变量redirectToNewPage，当它为真时进行重定向。在callback 中设置redirectToNewPage 等于true。

class LoginForm extends React.Component 
  state = 
    redirectToNewPage: false
  

  const submit=(email='',password='')=>
     ...
     else

     //redirect to new page
     this.setState( redirectToNewPage: true )
     
   

   render() 

   // The part that makes the redirect happen
   if (this.state.redirectToNewPage) 
     return (
     <Redirect to="/pageAfterSubmit"/>
     )
   

   return (
     ...
   )  

  

【讨论】：

试试上面的那个。修改它。