installed react-router-dom

src/components/NavigationItem.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
+// import React from 'react';
+// import { NavLink } from 'react-router-dom';
 
-const navigationItem = (props) => (
-  <NavLink
-    className="navigation__container-link"
-    exact={props.exact}
-    to={props.link}
-  >
-    {props.children}
-  </NavLink>
-);
+// const navigationItem = (props) => (
+//   <NavLink
+//     // className="navigation__container-link"
+//     exact={props.exact}
+//     to={props.link}
+//   >
+//     {props.children}
+//   </NavLink>
+// );
 
-export default navigationItem;
+// export default navigationItem;

src/containers/App.js

@@ -1,10 +1,5 @@
-import React, { Component } from 'react';
-import Layout from './Layout';
-
-class App extends Component {
-  render() {
-    return <Layout />;
-  }
-}
+import React from 'react';
+import AppRouter from './AppRouter';
 
+const App = () => <AppRouter />;
 export default App;

src/containers/AppRouter.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+
+import Layout from './Layout';
+import NotFound from './NotFound';
+
+const AppRouter = () => (
+  <BrowserRouter>
+    <Switch>
+      <Route path="/" exact component={Layout} />
+      <Router component={Search} />
+      <Route component={NotFound} />
+    </Switch>
+  </BrowserRouter>
+);
+
+export default AppRouter;

src/containers/Layout.js

@@ -92,7 +92,6 @@ class Layout extends Component {
     axios.get(url)
       .then(res => {
         const movieData = res.data;
-
         this.setState({ movieOverview: movieData });
       }).catch(error => {
         console.log(error);
@@ -105,25 +104,18 @@ class Layout extends Component {
   }
 
   render() {
-
     return (
       <div>
         <Navbar showMovies={this.onSearchHandler} />
-        {
-          this.state.toggleMovieList ? <MainContent /> : <div
-            className="search-container">{this.state.MovieList}</div>
-        }
+        <MainContent />
         <Modal show={this.state.toggleModal}
           modalClosed={this.closeModal}
           movie={this.state.movieOverview}>
-
           <MovieDetails movie={this.state.movieOverview} />
         </Modal>
       </div>
-
     );
   }
-
 }
 
 export default Layout; 

src/containers/Navbar.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { NavLink } from 'react-router-dom';
+
 import NavigationItem from '../components/NavigationItem'
 import SearchLogo from '../static/images/search-icon.svg';
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png';
@@ -30,7 +32,6 @@ class navigation extends Component {
     }
   }
 
-
   render() {
     const { scrolling } = this.state;
     const { showMovies } = this.props;
@@ -38,7 +39,9 @@ class navigation extends Component {
     return (
       <nav className={"navigation " + (scrolling ? "black" : "")} >
         <ul className="navigation__container">
-          <NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt="" /></NavigationItem>
+          <NavLink to="/">
+            <img className="navigation__container--logo" src={NetflixLogo} alt="" />
+          </NavLink>
           <DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
           <div className="navigation__container-link pseudo-link">Home</div>
           <div className="navigation__container-link pseudo-link">TV Shows</div>
@@ -46,16 +49,13 @@ class navigation extends Component {
           <div className="navigation__container-link pseudo-link">Recently Added</div>
           <div className="navigation__container-link pseudo-link">My List</div>
 
-
           <div className="navigation__container--left">
             <SearchLogo className="logo" />
-
             <input
               onChange={showMovies}
               className="navigation__container--left__input"
               type="text"
               placeholder="Title, genres, people" />
-
           </div>
 
           <div className="navigation__container-link pseudo-link">KIDS</div>
@@ -64,11 +64,10 @@ class navigation extends Component {
 
           <DropdownContent />
           <DropdownArrow className="navigation__container--downArrow" />
-
         </ul>
       </nav>
     )
   }
 }
 
-export default navigation; 
+export default navigation; 

src/containers/NotFound.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h1>NOT FOUND</h1>
+    </div>
+  );
+}

src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
 import reducers from './store/reducers';
@@ -20,9 +19,7 @@ const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 // - add routing and 404 page
 const app = (
   <Provider store={createStoreWithMiddleware(reducers)}>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <App />
   </Provider>
 );