ReactJSとreact-router-dom v4のユーザー固有の固有のURLを処理するルート

Question

ユーザーがパスワードを忘れてしまった場合は、入力したページに移動するためのリンクをクリックしますユーザー名。ユーザー名が一致すると、ユーザー名に関連付けられた電子メールに一意に生成されたURLが送信されます。たとえば：

http://localhost:8000/auth/security_questions/0e51706361e7a74a550e995b415409fdab4c66f0d201c25cb4fa578959d11ffa 

このすべてが正常に動作しますが、私はReactとreact-router-dom v4を使用してルーティングのフロントエンドでこれを処理する方法を把握しようとしています。私はこのルートを作った。

<Route exact path='/auth/security_questions/:key' component={SecurityQuestions} /> 

セキュリティに関する質問に関連する正しいコンポーネントが読み込まれますが、これは後の動作ではありません。結局のところ、それはあなたがsecurity_questions/の後に置く何かをとります。

コンポーネントをロードする前に、:keyをデータベースと照合する必要があります。

私はいくつかのことについてはよく分からない：

1）私は、データベースに対して検証する値として渡すことができるように:key部分を解析する方法。

2）確認処理の一般的な考え方はありますが、Reactの指示方法はわかりません。「OKキーがデータベースで確認されました。コンポーネントの読み込みが完了しました。」

私はそれはのような一般的な外観になると思い：

// ./containers/security_questions.js 

componentWillMount() { 
    this.props.verifyKey(:key); 
} 

そしてアクション：

// ./actions/authentication.index.js 

export function verifyKey({ :key }) { 
    return function(dispatch) { 
     axios 
      .post(
       `${ROOT_URL}/api/auth/security_questions/`, 
       { :key } 
      ) 
      .then(response => { 

       dispatch('Finish loading the rest of the component') 
      }) 
      .catch(error => { 
       dispatch(authError(error.response.data.non_field_errors[0])); 
      }); 
    } 
} 

それとも代わりに、それはコンポーネントをロード仕上げの、それは別のURLにちょうどルートべき保護されたルートです。私はあなたの減速で、いくつかの状態を設定しますセキュリティの質問の成功に続いて

とレンダリング -

componentWillMount() { 
    this.props.verifyKey(this.props.match.params.key); 
} 

がhttps://reacttraining.com/react-router/web/example/url-params

を参照してください：

Answer 1

1. あなたはそう（https://reacttraining.com/react-router/web/api/Route）のようなパスからのparamsつかむことができます。

   <Route path="/user/:username" component={User}/> 
   
   const User = ({ match }) => <h1>Hello {match.params.username}!</h1> 
   

2. あなたは条件付きでverifyKeyによって設定されたいくつかの状態に基づいてレンダリングすることになるでしょうし。あなたの検証ロジックに入れ、適切なコントロールをレンダリングするために、経路上のrenderメソッドを使用することができます

   componentWillMount() { 
       this.props.verifyKey(this.props.match.params.key); 
   } 
   
   render() { 
       if (this.state.permitRender) { 
       return <Component> 
       } else { 
       return <LoadingComponent /> 
   } 
   

Answer 2

ルートparamsがmatch.params小道具の内側になりますそれに基づいて。

Answer 3

。 SecurityQuestionsコンポーネントではなく、ルートをレンダリングするコンポーネントのキーを検証するアクションを移動する必要があります。

<Route exact 
    path='/auth/security_questions/:key' 
    render={(props)=>{ 
     let finalComponent= <ComponentToRenderWhenKeyDoesNotMatch/>; 
     if(this.props.verifyKey(props.match.params.key)){ 
       resultantComponent=<SecurityQuestions/> 
     } 
     return finalComponent; 
    }} 
/>