反応ルータdomのレンダリングとプライベートルートの使用

Question

私はリアクションルータdom v4を使用してプライベートルート内に2つのコンポーネントをレンダリングしようとしています。これは通常のルートを使用して可能ですが、カスタムルートを使用する場合はそうではありません。 "React.createElement：型が無効です - 文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）がありますが、未定義です。それはで定義されています、またはあなたがデフォルトと名前の輸入を混同している可能性があるファイルからコンポーネント。 」

カスタムルート（認証）

return (
     <Route 
     {...rest} 
     render={props => 
      this.currentUser() 
      ? <Component currentUser={this.currentUser} {...props} /> 
      : <Redirect 
       to={{ 
        pathname: '/auth/login', 
        state: { from: props.location } 
       }} 
       /> 
     } 
     /> 
    ) 

はその後、私のルートでは、私はこの

return (
     <div> 
     <Switch location={isModal ? this.prevLocation : location}> 
      <Authenticated path="/" exact component={Main} /> 
      <Route path="/auth/register" exact component={Register} /> 
      <Route path="/auth/login" exact component={Login} /> 
      <Authenticated 
      path="/clients/:id/edit" 
      render={(props) => (// Not working as expected. Works fine using Route instead of Authenticated 
       <div> 
       <Main /> 
       <ClientEdit /> 
       </div> 
      )} 
      /> 
     </Switch> 
     {isModal ? 
      <Authenticated 
      path='/clients/new' 
      component={ClientNew} 
      /> 
     : null} 
     {isModal ? 
      <Authenticated 
      path='/clients/:id/edit' 
      component={ClientEdit} 
      /> 
     : null} 
     </div> 
    ); 

Answer 1

あなたあなたが送っているrender小道具を受け取ったり利用したりしていない：

小道具を使用すると、とき render小道具を使用する際

component={(props) => ( 
    <div> 
    <Main /> 
    <ClientEdit /> 
    </div> 
)} 

また見にルータのドキュメントを反応させるチェック：代わりのようにcomponent小道具に部品を送ってレンダリング使用しての3210

。 protectedRouteを変更して両方を処理できる方がはるかに良いでしょう。

Answer 2

ような何かをしたいI次のカスタムコンポーネントを作成する必要があると思われます。

その後

return(
    <div> 
    <Main /> 
    <ClientEdit /> 
    </div>) 

それをインポートして、このようなあなたの認証済みのコンポーネントでそれを使用します。

<Authenticated 
    path="/clients/:id/edit" 
    component={CustomComponent} 
/> 

編集：あなたも提供されている場合、あなたの認証コンポーネントで小道具をレンダリング処理することができます：で

if (this.props.render && this.currentUser()) { 
    return(
    <Route 
     {...rest} 
     render={this.props.render} 
    /> 
} else { 
    return (
     <Route 
     {...rest} 
     render={props => this.currentUser() ? 
      <Component currentUser={this.currentUser} {...props} /> : 
      <Redirect 
       to={{ 
        pathname: '/auth/login', 
        state: { from: props.location } 
       }} 
      /> 
      } 
     /> 
    ) 
}