ログイン後のリダイレクトの反応

Question

Reactjsでアプリを作成しています。私はapp.js、dashboard.js、login.jsを持っています。

in my app.jsログインページへのリンクがあります。私はログインページからダッシュボードページに目を向けたいと思っていました。私のログインでは、私はバックエンドサービスへの呼び出しとユーザーのクレデンシャルの検証を行っています。私は、ユーザーの資格情報を入力すると、私は検証した後、私はページがリダイレクトされていませんが、コンソールにメッセージをリダイレクト見ることができ、login.js

request.post(
     options, 
     function (error, response, body) { 
      if (!error && response.statusCode === 200) { 
       console.log('redirecting'); 

       // browserHistory.push('/dashboard') 
       // (<Redirect to={{ 
       // pathname: '/dashboard' 
       // }}/>) 
       // this.props.history.push('/dashboard'); 

       <Redirect to='./dashboard' /> // redirection is not working here 

      }else{ 
       console.log(error); 
      } 
     } 
    ); 

に次のコードを持っています。

私はreact-router-domを使用しています。あなたは何がうまくいかなかったのかを特定するのを助けてくれますか？

Answer 1

jsxコードを関数内に配置しようとしています。 jsxコードはレンダー機能内で動作し、<Redirect to='./dashboard' />のクリックでダッシュボードページにリダイレクトされます。しかし、プログラムでリダイレクトしようとしています。

browserHistory.push('/dashboard')を関数からリダイレクトするには、

これは、私はあなただけのコンポーネントの1つの中から（ないJS関数内から）レンダリング要素として<Redirect>を使用することができます信じて参照Navigating Outside of Components

Answer 2

です。

したがって、この関数を呼び出すloginページから、ユーザーが正常にログインしたかどうかを示すためにサーバーからの応答後に変数を設定し、その値に基づいて<Redirect>と表示する方法について説明します。例えば、

request.post(
    options, 
    function (error, response, body) { 
     if (!error && response.statusCode === 200) { 
      console.log('redirecting'); 

      this.setState({ 
       isLoggedIn: true 
      }) 

     }else{ 
      console.log(error); 
     } 
    } 
); 

とあなたのrender方法で

を：

if (this.state.isLoggedIn) { 
    return <Redirect to='./dashboard' /> 
} 
return (
    // If the user is not logged in, return the usual login page... 
)