前のパスのURLに基​​づいてcomponentWillReceivePropsのメソッドを呼び出します

Question

私が達成しようとしているのは、以前のパスのURL（私は反応ルータを使用しています）に基づくメソッド呼び出しです。

前のパスのURLが

http://www.website.com/signin?f=world-news&join=true&nextPath=%2Ff%2Fworld-news

とユーザーに成功看板のように見えますが今、私のコンポーネントが搭載され、私は新しいURLを参照しているとき

http://www.website.com/f/world-news

にリダイレクトされ、メソッドをトリガーしたいのですが、ユーザーが私の質問で指定した前のURLからサインインしている場合のみです。前のURLの一意の文字列は&join=trueです。 I、リダイレクト機能を要約する

_getCurrentPathName() { 
     let path = window.location.pathname + window.location.search; 
     if (path === "/") { 
      return undefined; 
     } 
     return path; 
    } 

transitionToSigninAndAutoJoin(query) { 
    const q = Object.assign({}, query, { 
     f: this.props.params.slug, 
     nextPath: this._getCurrentPathName(), 
     join: true 
    }); 

    this.transitionTo({ pathname: "/signin", query: q }); 
} 

にコードを追加：以前のパスが&join=true

例の擬似コードは

import React, { PropTypes, Component } from "react"; 
import MyComponentView from "./view"; 

class MyComponent extends Component { 
    componentWillReceiveProps(nextProps) { 
     if (// prevoius path logic check) { 
      this.props.myMethod(); // Calling the method over here 
     } 
    } 

    render() { 
     return (
      <MyComponentView {...this.props} /> 
     ); 
    } 
} 

export default MyComponent; 

などの更新を探します含まれている場合はどうすれば componentWillReceivePropsでメソッドを呼び出すことができますコンポーネントのボタンをクリックすると、ユーザーがログインしているかどうかがチェックされます。ユーザーがログインしている場合は、元のコードサンプルに記載されている方法 myMethod()を呼び出しています。

そうでない場合は、現在のパスを取得してサインインパスにリダイレクトするサインインページ（transitionToSigninAndAutoJoin）にリダイレクトします。例えば、私の現在のパス名がhttp://www.website.com/f/world-newsであり、ユーザがログインしていない場合は、新しいリダイレクトURLが戻っhttp://www.website.com/f/world-newsにリダイレクトされ成功でサインインユーザの際http://www.website.com/signin?f=world-news&join=true&nextPath=%2Ff%2Fworld-news

のように見えますが、今私は、コンポーネントがmounteddあるときに自動的にmyMethod()を呼びたいです。あなたがリダイレクトされた場合、以前のURLが代わりに前のURLに頼るの&join=true

Answer 1

が含まれている場合しかし、myMethod()のみが自動的に呼び出されなければなりません、あなたはlocation descriptorにstateオブジェクトを追加することができます。

function redirectAfterSignin() { 
    const { 
    nextPath, 
    join = false 
    } = this.props.location.query 

    this.router.push({ 
    pathname: nextPath, 
    state: { join } 
    }) 
} 

は、その後、あなたの他のコンポーネントでは、あなただけのjoin値を決定するlocation.state小道具を確認する必要があります。

class MyComponent extends React.Component { 
    componentWillReceiveProps(nextProps) { 
    if (nextProps.location.state.join) { 
     // do something 
    } 
    } 
}