GeorgeGkas GeorgeGkas - 2 months ago 26
Javascript Question

Pass this.props.children to another file in react-router

I try to render a React Component in my page using react-router.

The file structure I use is the one bellow:

React/
components/
Container/
Sidebar.js
Main.js
Container.js
Header.js
Layout.js
pages/
Main.js
Lesson.js
index.js


So I want to render the components from the
pages
folder in the component that belongs to
Main.js
. The
Sidebar.js
holds the navigation menu.

Here is what I tried:

index.js

import React from 'react';
import ReactDom from 'react-dom';

import Layout from './components/Layout';

import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import Index from './pages/Index';
import Lesson from './pages/Lesson';

const app = document.getElementById('app');
ReactDom.render(
<Router history={hashHistory} >
<Route path="/" component={Layout} >
<IndexRoute component={Index} ></IndexRoute>
<Route path="lesson" name="lesson" component={Lesson} ></Route>
</Route>
</Router>
,app);


Layout.js

import React from 'react';

import Header from './Header';
import Container from './Container';

export default class Layout extends React.Component {
render() {
return (
<div>
<Header />
<Container />
</div>
);
}
}


Container.js

import React from 'react';

import Sidebar from './Container/Sidebar';
import Main from './Container/Main';

export default class Header extends React.Component {
render() {
return (
<div id="container">
<Sidebar />
<Main />
</div>
);
}
}


Main.js

import React from 'react';

export default class Main extends React.Component {
render() {
return (


{/* Here I want to render the contents */}


);
}
}

Sidebar.js

import React from 'react';
import { Link } from 'react-router';
import sidebarStore from './Sidebar/SidebarStore.js';


export default class Sidebar extends React.Component {
render() {
return (
<div id="nav-md-placeholder">
<nav id="sidebar">
<ul id="main-menu">
<li class="ripple-btn">
<Link to="/">
<span class="item-align-fix">
<i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
<strong>
<span>index</span>
</strong>
</span>
</Link>
</li>
<li class="ripple-btn">
<Link to="lesson">
<span class="item-align-fix">
<i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
<strong>
<span>lesson</span>
</strong>
</span>
</Link>
</li>
</ul>
</nav>
</div>
);
}
}


I don't get any errors on my console when building the app nor in th browser console. When I click on the links I redirect to the following urls but nothing happen:

Click on Index -> http://localhost/new-webclass/#/?_k=gukonu
Click on Lesson -> http://localhost/new-webclass/#/lesson?_k=7mcbcx


I don't know if I setted the routes with the wrong way. The official documentation doesn't help either.

Here is also the example of the Lesson.js I want to render:

import React from 'react';

export default class Lesson extends React.Component {
render() {
return (
<h1>Lesson Page</h1>
);
}
}


Solution



See the answer of Random User bellow. He provides a nice explanation. So down bellow you see how I passed
{this.props.children}
to the file with the component I needed:

Layout.js

<Container main_content={this.props.children}/>


Container.js

<Main main_content={this.props.main_content}/>


Main.js

render() {
return (
<main class={this.MainContentPlaceholder} id="main-content-placeholder">
<Overlay />
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
{this.props.main_content}
</div>
</main>
);

Answer

In your index.js file

<Router history={hashHistory} >
  <Route path="/" component={Layout} >
    <IndexRoute component={Index} ></IndexRoute>
    <Route path="lesson" name="lesson" component={Lesson} ></Route>
  </Route>
</Router>

<Route path="/" component={Layout} > acts as the parent route and all other routes are its sub-routes. and its using Layout component

So even when you change the route, the parent component remains there and the component of new route is passed to the parent component Layout as a children, but you're not rendering children in your Layout component.

So, in your Layout.js file, add this line {this.props.children}, Example

return (
  <div>
    <Header />
    <Container />
    {this.props.children}
  </div>
);

You can Re-arrange it to suit your needs, but add {this.props.children} wherever you want to render the child components passed to it.

Comments