Multiple layouts with React Router

Last Updated On Sunday 19th Dec 2021

Here’s the Article About React Router

	import React, { Fragment } from "react";
import {
  BrowserRouter as Router,
  Route as DefaultRoute,
  Switch,
} from "react-router-dom";

import { Home, About, Contact } from "./routes";

import { NavBar } from "./components";

const DefaultLayout = ({ children }) => (
  <Fragment>
    <NavBar />
    {children}
  </Fragment>
);

const HomePage = ({ children }) => <Fragment>{children}</Fragment>;

const Route = ({
  component: Component,
  layout: Layout = DefaultLayout,
  ...rest
}) => {
  return (
    <DefaultRoute
      {...rest}
      render={(props) => (
        <Layout>
          <Component {...props} />
        </Layout>
      )}
    />
  );
};

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} layout={HomePage} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  </Router>
);
export default App;