React Socks breakpoint wrapper example

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { BreakpointProvider } from 'react-socks';
import NowPlaying from './containers/NowPlaying/NowPlaying';
import Dashboard from './containers/Dashboard/Dashboard';
import Upcoming from './containers/Upcoming/Upcoming';
import MovieSearch from './containers/MovieSearch/MovieSearch';
import Genres from './containers/Genres/Genres';
import Header from './containers/Header/Header';
import './App.css';

function App() {
  return (
    <BreakpointProvider>
      <div className="App">
        <Router>
            <Header />
            <Switch>
              <Route exact path="/" component={Dashboard} />
              <Route exact path="/search" component={MovieSearch} />
              <Route exact path="/nowplaying" component={NowPlaying} />
              <Route exact path="/upcoming" component={Upcoming} />
              <Route exact path="/genres" component={Genres} />
            </Switch>
        </Router>
      </div>
    </BreakpointProvider>
  );
}

export default App;