web-dev-qa-db-ja.com

React + redux-form-送信後にリダイレクト

私はreact-router-domv4を使用しています。フォームの送信が成功した後、どうすればリダイレクトできますか？

私はそのチュートリアルに従いました [〜＃〜] link [〜＃〜] 。次に、独自の送信関数を作成しました：

    const submit=({email='',password=''})=>{
  let error={};
  let isError=false;
  if(email.trim()===''){
    error.email='Required';
    isError=true;
  }
  else if(![ '[email protected]' ].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>

助けてくれてありがとう。

reactjsreduxredux-formreact-router-dom
7
Mateusz

状態変数redirectToNewPageを作成します。これは、trueの場合にリダイレクトを行います。 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 (
     ...
   )  

  }
}
7
mrinalmech