Wrapping the root component with MUI theme and BrowserRouter

The custom React components that we create to make up the user interface will be accessed with frontend routes specified in the MainRouter component. Essentially, this component houses all the custom views developed for the application. When defining the root component in App.js, we wrap the MainRouter component with the MuiThemeProvider to give it access to the Material-UI theme, and BrowserRouter to enable frontend routing with React Router. The custom theme variables defined previously are passed as a prop to the MuiThemeProvider, making the theme available in all our custom React components.

mern-skeleton/client/App.js:

import React from 'react'
import MainRouter from './MainRouter'
import {BrowserRouter} from 'react-router-dom'

const App = () => (
  <BrowserRouter>
    <MuiThemeProvider theme={theme}>
      <MainRouter/>
    </MuiThemeProvider>
  </BrowserRouter>
)