A Layout React Component using React Router

Layout.jsx

const Layout = ({ children }) => {
  return(
    <React.Fragment>
      <Header/>
      <div className ="wrapper">
        <Navigation />
        <main>{ children } </main>
      </div>
    </React.Fragment>
  )
}

export default Layout;

//in the index.js file

import {BrowserRouter as Router, Route } from 'react-router-dom'
import Layout from '../components/Layout'
import Home from '../pages/Home'

const Pages = () => {
  return(
      <Router>
        <Layout>
          <Route path="/" component ={Home}/>
        </Layout>
      </Router>
  )
}