Project skeleton

package.json

@@ -9,6 +9,7 @@
     "bootstrap": "^4.5.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {

src/App.css

@@ -2,13 +2,6 @@
   text-align: center;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
+.container {
+  margin-top: 5px;
+}

src/App.js

@@ -1,12 +1,22 @@
 import React from 'react';
+import { Route, Switch, Redirect } from "react-router-dom";
 import './App.css';
+import Movies from "./components/movies";
+import MovieDetails from "./components/movieDetails";
+import NotFound from "./components/notFound";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-
-      </header>
+      <main className="container">
+        <Switch>
+          <Route path="/movies/:id" component={MovieDetails}></Route>
+          <Route path="/movies" component={Movies}></Route>
+          <Route path="/not-found" component={NotFound}></Route>
+          <Route path="/" component={Movies}></Route>
+          <Redirect to="not-found"></Redirect>
+        </Switch>
+      </main>
     </div>
   );
 }

src/components/movieDetails.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from "react";
+
+class MovieDetails extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <>
+
+            </>
+        );
+    }
+
+}
+
+export default MovieDetails;
+

src/components/movies.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from "react";
+
+class Movies extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <>
+                <h1>Movies</h1>
+            </>
+        );
+    }
+
+}
+
+export default Movies;
+

src/components/notFound.jsx

@@ -0,0 +1,10 @@
+import React, { Component } from "react";
+
+class NotFound extends Component {
+    state = {};
+    render() {
+        return <h1>Page Not Found</h1>;
+    }
+}
+
+export default NotFound;

src/index.js

@@ -3,11 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { BrowserRouter } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.css";
 
 ReactDOM.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>,
   document.getElementById('root')
 );