msgrouterII

client/src/App.js

@@ -1,6 +1,11 @@
 import React, { useState } from 'react';
-
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 import SavedList from './Movies/SavedList';
+import MovieList from './Movies/MovieList';
+import Movie from './Movies/Movie';
+
+
 
 const App = () => {
   const [savedList, setSavedList] = useState( [] );
@@ -12,7 +17,8 @@ const App = () => {
   return (
     <div>
       <SavedList list={savedList} />
-      <div>Replace this Div with your Routes</div>
+      <Route exact path='/' component={MovieList}/>
+      <Route path='/movies/:id' component={Movie}/>
     </div>
   );
 };

client/src/Movies/Movie.js

@@ -5,7 +5,7 @@ const Movie = (props) => {
   const [movie, setMovie] = useState();
 
   useEffect(() => {
-    const id = 1;
+    const id = props.match.params.id;
     // change ^^^ that line and grab the id from the URL
     // You will NEED to add a dependency array to this effect hook
 
@@ -18,7 +18,7 @@ const Movie = (props) => {
           console.error(error);
         });
 
-  },[]);
+  },[props.match.params.id]);
 
   // Uncomment this only when you have moved on to the stretch goals
   // const saveMovie = () => {

client/src/Movies/MovieList.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import {Link} from 'react-router-dom';
 
 const MovieList = props => {
   const [movies, setMovies] = useState([])
@@ -21,7 +22,9 @@ const MovieList = props => {
   return (
     <div className="movie-list">
       {movies.map(movie => (
-        <MovieDetails key={movie.id} movie={movie} />
+        <Link to={`/movies/${movie.id}`}> 
+           <MovieDetails key={movie.id} movie={movie} /> 
+        </Link>
       ))}
     </div>
   );

client/src/Movies/SavedList.js

@@ -1,12 +1,15 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const SavedList = props => (
   <div className="saved-list">
     <h3>Saved Movies:</h3>
     {props.list.map(movie => (
       <span className="saved-movie">{movie.title}</span>
     ))}
-    <div className="home-button">Home</div>
+     <Link to='/'>
+       <div className="home-button">Home</div>
+     </Link>
   </div>
 );
 

client/src/index.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router} from 'react-router-dom';
+
 
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+
+ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));