React App Set Up with Layout for Router

App.js

import React from "react";

// router
import { BrowserRouter as Router, Switch } from "react-router-dom";

// routes
import AuthRoute from "routes/AuthRoute";

// pages
import Login from "pages/auth/Login";

function App() {
  return (
    <Router>
      <Switch>
        <AuthRoute exact path="/" component={Login} />
      </Switch>
    </Router>
  );
}

export default App;

AuthLayout.jsx

import React from 'react'
// import PropTypes from 'prop-types';

const AuthLayout = ({children}) => {
  return (
    <div className="bg-pink-100">
      {children}
    </div>
  )
}

AuthLayout.propTypes = {

}

export default AuthLayout;

AuthRoute.jsx

import React from "react";
// import PropTypes from 'prop-types'

// router
import { Route } from "react-router-dom";

// layout
import AuthLayout from "layouts/AuthLayout";

const AuthRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => (
        <AuthLayout>
          <Component {...props} />
        </AuthLayout>
      )}
    />
  );
};

AuthRoute.propTypes = {};

export default AuthRoute;

jsconfig.json

//setup inside client folder
//for making absolute urls
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}