[Solved]-How to add Nested and Non-Nested Routes with React Router - ReactJS?-Reactjs

here what i've done. see demo.

i don't wanna be too confused because of this, so i choose a simple way.

routes.js

import home from "./pages/home";
import complexpath from "./pages/complexpath";
import login from "./pages/login";

export default [
  {
    path: "/",
    component: home,
    withheadersidenav: true
  },
  {
    path: "/yet/another/complex/path",
    component: complexpath,
    withheadersidenav: true
  },
  {
    path: "/login",
    component: login,
    withheadersidenav: false
  }
];

then, simply map the routes.

app.js

import react from "react";
import { switch, route } from "react-router-dom";
import baselayout from "./baselayout";
import routes from "./routes";

export default class extends react.component {
  state = {
    withheadersidenav: true
  };

  showheadersidenav = (withheadersidenav = true) => {
    this.setstate({ withheadersidenav });
  };

  render() {
    return (
      <baselayout withheadersidenav={this.state.withheadersidenav}>
        <switch>
          {routes.map(route => (
            <route
              exact
              key={route.path}
              path={route.path}
              render={() => (
                <route.component
                  showheadersidenav={() =>
                    this.showheadersidenav(route.withheadersidenav)
                  }
                />
              )}
            />
          ))}
        </switch>
      </baselayout>
    );
  }
}

there will be a hoc for each page to handle layout changing. see pages/withbase.js in demo project.