Dynimic child component rendering on same Layout Route

Question

I have a Component named Layout that should render different child components depending on the route. Parent component

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

In my main.jxs i want to render 3 Route using the Layout component with different ChildComponent passed as sidebar and content props like:

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

Components are imported as well. In other words, i want to dynamically change the content of layout based on the route. How can i achieve this using react-router-dom ?

Possible duplicate of [Configure nested Routes in react-router v4](https://stackoverflow.com/questions/44452858/configure-nested-routes-in-react-router-v4) — Shubham Khatri, Aug 30 '17 at 08:55
How can this be a duplicate of that? No way! I'm trying to dynamically change the Layout children component based on the router. I'm **not** making a nested route. — danyhiol, Aug 30 '17 at 09:06
You cannot pass props like that to the component, rather you can configure nested routes as you wish you app to look like — Shubham Khatri, Aug 30 '17 at 09:08
What's the result of the above code? it's kind of misleading. you posted it as if it works. — abdul, Aug 30 '17 at 09:10
@abdul It's not working. It's just what I want to achieve. @ShubhamKhatri I don't want to render routes. I want to render component based on the route. Going to `/user` will update the `Layout component` to render `` and ``. — danyhiol, Aug 30 '17 at 09:12

score 1 · Answer 1 · answered Aug 30 '17 at 10:35

Your approach is correct, but you need define index route that will display layout and your other routes have to be child routes.

I am using this as

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

than my Layout looks like:

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

I didn't test your answer as it looked quite complicated and Arthur solution worked so sry but I gave him a thumb up although yours may surely work too. — danyhiol, Aug 30 '17 at 22:14
Hi :-) No problem ... good is that you have some working solution :-) — Ivan Mjartan, Aug 31 '17 at 08:40

score 0 · Accepted Answer · answered Aug 30 '17 at 09:19

If I got you right you should use render func as prop in Route component (react router 4) In order to can render a several components. See https://reacttraining.com/react-router/web/api/Route/render-func

Also I provide next small example

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

Dynimic child component rendering on same Layout Route

2 Answers2