Monthly Archives: June 2017

React Router 4 Nested Page

Hi;

Here is an example of nested pages in react router. So you can make a template page and create nested pages with same template easily with react..

index.php

<code>
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Route, BrowserRouter as Router, Switch} from 'react-router-dom';
import Template from './Template';
import ExamplePage1 from './Page1';
import ExamplePage2 from './Page2';
import Login from './Login';

ReactDOM.render(
  <Router>
    <div>
    <Switch>
      <Route exact path="/" component={Login}/>
      <Route exact path="/login" component={Login}/>
      <Template>
          <Route exact path="/page1" component={ExamplePage1}/>
          <Route exact path="/page2" component={ExamplePage2}/>
      </Template>
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
);

template.php

<code>
import React, { Component } from 'react';
import { withRouter } from 'react-router'
class Template extends Component {
  render() {
    return (
      <div>
        <div>Template</div>
        <div className="content">
          {this.props.children}
         </div>
      </div>

    );
  }
}

export default withRouter(Template);

You can find full example at : https://github.com/bbolek/react-router-template-example