Billedresultat for react redux Exercise: React Router part 2 (Movie Router)

Idea: Introduction to React-Router (BrowserRouter, Route, Link and Switch).
Background: https://blog.pshrmn.com/entry/simple-react-router-v4-tutorial/ and https://reacttraining.com/react-router/web/guides/quick-start


In this exercise you have to implement routing in a small React App. The App is the wellknown Movie App from the ReactMovieInputOutput exercise.


Step 1 (Download the initial React-App and install the react-router-dom lib)
Download and unzip: movie-router-exercise.zip Open VSCode and run 'npm install' from your react-redux - directory.
Navigate to your new project directory and install the react-router-dom library locally by running 'npm install --save react-router-dom'.

Verify that your initial project is up and running with: 'npm start'. It should look something like this:







Step 2 (Modify index.js)
Import { BrowserRouter } from 'react-router-dom'. and wrap the <App /> tag in a <BrowserRouter> tag.


Step 3 (Modify Header.js)

Import { Link } from 'react-router-dom'. Add a Bootstrap Navigation bar with 4 <Link to="..."> with link to the following paths: '/', '/Admin', '/About' and '/Login'
Hint: For inspiration to the Nav Bar - look at the Nav Bars in: Bootstrap4Test.zip


Step 4 (Modify Main.js)
Add a statement for import of { Switch, Route } from 'react-router-dom' and add a Switch section with 4 Route:

 


Step 5 (Component Movies)
Create a new file Movies.js, and add a new Function Component Movies. The Component controls the sub-routes to MovieList and MovieDetail, so import MovieList, MovieDetail and { Switch, Route } from 'react-router-dom'. Add a Switch section with 2 Route:




Step 6 (Modify MovieList.js)
Import { Link } from 'react-router-dom'. Wrap the <li ..> element with the Link tag: <Link to={`/MovieDetails/${movie.Title}`}> <li ... ></li></Link> so we can show MovieDetails when a movie is clicked.

Step 7 (Modify MovieDetail.js)
Import { Link } from 'react-router-dom'. Wrap the text: 'Back' in the <button> element with a Link tag to: '/' - so we can use the Back-Button to go back to the MovieList.
Hint: <Link to="/">Back</Link>

 

Step 8 (Test)
Test your new React-Redux-Route app.
It should look something like this:

 


 


Congratulation! - Yes Route is also amazing! (and easy so use!)

/ Henrik H