2017-09-26 16 views
1

我々はすでに動的コンポーネントを選択してレンダリングする方法を知っている:react-router-domの動的コンポーネントを<Route>に与えることは可能ですか?

import CompA from './CompA'; 
import CompB from './CompB'; 

var componentSet = { 
'compa': CompA, 
'compb': CompB 
} 

var type = 'compa' 
var TargetComp = componentSet[type]; 
... 
return <TargetComp /> 

しかし<Route>コンポーネントと統合しようとすると私は成功を収めていない:

class DynamicRoute extends Component { 
    render() { 
     return (
      <Route path="/compa" render={()=> <TargetComp /> }/> 
     ); 
    } 
} 
// Error message: 
// Content.render(): A valid React element (or null) must be returned.- 
// You may have returned undefined, an array or some other invalid object. 

は、任意の助けのために感謝!

答えて

0

これはv4用ですか?私は通常レンダリングの代わりにコンポーネントの小道具を使用します。これは効果がありますか? Route経由でレンダリング

<Route path="/compA" component={TargetComp}/>

+0

はい、私はv4を使用していますが、残念ながらこれを試しましたが動作しません。 – Carr

+0

実際に単純なタイプミスがあると思います この行 '' 'var TargetComp = componentSet [compa];' 'は、compaがどこでも変数として定義されていないため、隠すコードがなければエラーを返します...したがって、componentSet [compa]はnullを返すcomponentSet [undefined]を評価する可能性が高いです。それを 'componentSet [type]'に変更してください –

+0

ありがとう、ただ修正します!しかし、ここに示した例を入力するだけです。 – Carr

0

あなたが(コンポーネントのコードでthis.props.historyのようなmatchlocationまたはhistoryなど)コンポーネントでルートのプロパティにアクセスする場合は、この方法でコンポーネントに小道具を渡すことができます。

<Route path="/compA" component={(props) => (<compA {...props} myProp={this.state.myProp} />) } />