Dynimic子组件在相同的布局路线上呈现

Question

我有一个名为Layout的组件，它应根据路线呈现不同的child components。 父组件

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

在我main.jxs我想呈现3路线使用Layout component不同ChildComponent为侧边栏和内容类似的道具经过：

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

零部件均采用进口为好。换句话说，我想动态地改变基于路线的布局内容。我怎样才能达到这个使用react-router-dom？

Answer 1

如果我找到了你，你应该使用渲染功能作为道具组件中的道具（反应路由器4） 为了可以渲染多个组件。 见https://reacttraining.com/react-router/web/api/Route/render-func

此外，我提供未来小例子

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

Answer 2

你的做法是正确的，但你需要定义显示布局和其他途径必须是子路由指数航线。

我用这作为

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

比我的布局是这样的：

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> 
     ); 
    } 
}