How to add Nested and Non-Nested Routes with React Router - ReactJS?

Question

I have a Router File, where my Routes are nested under Index Component. However, I want some other component, login which I don't want to Nest under any component but I want to use it to redirect to '/' home route.

If I use Div tags, then it is messing with my Template. I am adding the Login component - route inside the Switch Tag. If I don't do that I get React can only have one child error.

Does anyone know how to do a Nested Route and a Non-Nested One? Please Help.

This is my Router File.

import React, { Component } from 'react';
import './App.css';
import { Provider } from 'react-redux';
import store from './store/store';
import { Router, Route , Switch } from 'react-router-dom';
import Index from './actions/indexToggle/indexActions';
import FirstDashboard from './_layouts/views/firstDashboard';
import SecondDashboard from './_layouts/views/secondDashboard';
import ThirdDashboard from './_layouts/views/thirdDashboard';
import FourthDashboard from './_layouts/views/fourthDashboard';
import history from './history';
import FifthDashboard from './_layouts/views/fifthDashboard';
import Login from './_layouts/views/Login/login';
const Main = () => (


        <Provider store={store}>

          <Router history={history}>
              <Switch>
                  <Index>
                      <Route  exact path='/overview1' component={FirstDashboard} />
                      <Route  exact path='/overview2'  render={(props) => <SecondDashboard {...props} show="show" /> }   />
                      <Route  exact path='/overview3'  component={ThirdDashboard} />
                      <Route  exact path='/overview4'  component={FourthDashboard} />
                      <Route  exact path='/overview5'  component={FifthDashboard} />  
                  </Index>
                  <Route path='/login' component={Login} />
                </Switch>
          </Router>

        </Provider>

)
export default Main;

score 1 · Accepted Answer · answered Jul 21 '18 at 23:53

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.

Loved this approach. @ukasyah. Thanks. – codemt Jul 22 '18 at 19:16 — codemt, Jul 22 '18 at 19:16

How to add Nested and Non-Nested Routes with React Router - ReactJS?

1 Answers1