Dynimic Kind Komponente Rendering auf dem gleichen Layout Route

Question

Ich habe eine Komponente mit dem Namen Layout, die je nach Route child components unterschiedlich rendern sollte. Geordnete Komponente

export default class Layout extends Component{ 
    render(){ 
     return (
      <div> 
       <div> 
        <div> 
         <Navbar/> 
         {this.props.sidebar} 
         {this.props.content} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

In meinem main.jxs i 3 Route mit der Layout component mit verschiedenen ChildComponent geben als Sidebar und Inhalt Requisiten wie rendern wollen:

<Route path="/profile" component={sidebar: <Sidebar />, content: <Content />} /> 
<Route path="/user" component={sidebar: <Sidebar />, content: <User />} /> 
<Route path="/edit" component={sidebar: <Sidebar />, content: <Edit />} /> 

Komponenten importiert werden, auch. Mit anderen Worten, ich möchte den Inhalt des Layouts basierend auf der Route dynamisch ändern. Wie kann ich dies erreichen mit react-router-dom?

Answer 1

Wenn ich dich richtig verstanden habe, solltest du render func als Prop in Route Komponente (reagiere Router 4) Um eine mehrere Komponenten zu rendern. Siehe https://reacttraining.com/react-router/web/api/Route/render-func

Auch nächstes kleines Beispiel

https://jsfiddle.net/69z2wepo/85086/

Answer 2

Ihr Ansatz richtig ist, ich biete, aber Sie müssen Index Route definieren, die das Layout angezeigt werden und Ihre andere Routen haben Kinder Routen sein.

Ich benutze dies als

<Route path="/" component={Layout} > 
     <IndexRoute components={{ body: LandingPage }} /> 
     <Redirect from="appdetail/" to="/" /> 
     <Route path="appdetail/:applicationId" components={{ body: AppDetailPage }} /> 
</Route>  

als mein Plan sieht so aus:

export class Layout extends React.Component<ILayoutProps, void> { 

    /** 
    * Renders this object. 
    * 
    * @return A JSX.Element. 
    */ 
    public render(): JSX.Element { 

     const mainDivStyle: React.CSSProperties = { 
      width: "100%", 
      height: "100%", 
      top: "0px", 
      left: "0px", 
      backgroundColor: "#f2f2f2", 
      fontSize: "12px", 
      fontFamily: "Gotham" 
     }; 

     const contentDesktopStyle: React.CSSProperties = { 
      height: "100%" 
     }; 


     return (
      <div style={mainDivStyle}> 
        <div id="contentId" style={contentDesktopStyle}> 
         <Header />       
         { this.props.body } 
        </div> 
      </div> 
     ); 
    } 
}