Exercise: React Router part 2 (Movie Router)

Idea: Introduction to React-Router (BrowserRouter, Route, and Link).
Background: https://blog.webdevsimplified.com/2022-07/react-router/ and https://www.youtube.com/watch?v=Ul3y1LXxzdU

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: redux-toolkit-movie-sol.zip (ReactReduxExercise2) 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:





Oh Yes - your right - it's not the same, it's using another Themes. Try change the themes to "Slate", see: Bootswatch

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 { Routes, Route } from 'react-router-dom' and add a Routes section with someRoute:

Step 5 (....)
Try to figure out whats missing, some component? some Link?
For inspiration look at: ReactRouterExercise1

Step 6 (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