コンポーネントに反応する反応ルータドームパスの小道具

Question

ルータを使用してコンポーネントに小道具を渡す必要があります。あなたが見ることができるように、私はコンポーネントをログインして渡したい小道具をにisAuthenticated

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import AppBarTop from './appbar/AppBarTop'; 

import Login from '../pages/login/Login'; 
import {BrowserRouter as Router, Route} from 'react-router-dom'; 


class App extends Component { 

    render() { 

     const { isAuthenticated } = this.props; 

     return (
      <Router> 
       <div> 
        <AppBarTop isAuthenticated={isAuthenticated} /> 
        <div className="content"> 
         <Route path="/login" isAuthenticated={isAuthenticated} component={Login} /> 
        </div> 
       </div> 
      </Router> 
     ); 
    } 
} 

： はここに私のコードです。

class Login extends Component { 

    constructor(props) { 
     super(props); 
     console.log(props); 
    } 

    render() { 
     return (
      <LoginForm /> 
     ); 
    } 

} 

export default connect(null) (Login); 

私はが小道具がないにisAuthenticated小道具を記録。私は間違っているの？どのように私は正しく小道具を渡すことができますか？ 私はドキュメントやその他の議論に続きました。私の理解から、それはうまくいくはずです。 のバージョンが反応し、ルータと反応-ルータ-DOMを4.0.0

Answer 1

はこのようにそれを渡している。

<Route 
    path="/login" 
    render={(props) => <Login {...props} isAuthenticated={isAuthenticated}/>} 
/> 

それは、ログインコンポーネントでthis.props.isAuthenticatedで利用可能であるべきです。 {...props}の

理由：私たちは、これは、コンポーネントをログインするだけisAuthenticated渡されます書かない場合

、ルータはコンポーネントに渡す他のすべての値は、ログインコンポーネント内利用できません。 {...props}と書くと、すべての値を1つの余分な値で渡しています。

ルータの代わりにcomponentを使用する代わりに、renderメソッドを使用します。 DOC 1として

：

Component：

コンポーネントを使用します（代わりに以下、レンダリングや子供） ルータが与えられた から新リアクト要素を作成するためにReact.createElementを使用しています成分。つまり、コンポーネント属性 にインライン関数を指定すると、すべてのレンダリングで新しいコンポーネントが作成されます。 これは、既存のコンポーネントをアンマウントし、既存のコンポーネントを更新するだけではなく、新しい コンポーネントをマウントすることになります。 インライン描画にインライン関数を使用する場合は、レンダリングを使用します。

Render：

これは 望ましくない再マウントせずに便利なインラインレンダリングやラッピングすることができます。