Portfolio React main component

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import Nav from './components/Nav';
import Single from './components/Single';
import ScrollToTop from 'react-router-scroll-top';
import ReactVivus from 'react-vivus';
import top from './images/topography-jde-white.svg';
function App() {
  return (

    <Router>
      <ScrollToTop>
        <ReactVivus
        id="foo"
        option={{
          file: top,
          animTimingFunction: 'EASE',
          type: 'sync',
          onReady: console.log,
          start: "autostart",
        
        }}
        
        callback={console.log}
        />
        <div className="wrapper">
          <Header />
          <Nav />
          <Route path="/" exact><Home /></Route>
          <Route path="/project"><Single /></Route>
          <Footer />
        </div>
      </ScrollToTop> 
    </Router>
    
  );
}

export default App;