Added navbar with dummy Dragon and MyProfile page.

package.json

@@ -9,6 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "redux": "^4.1.2",
     "redux-logger": "^3.0.6",

src/App.js

@@ -1,10 +1,20 @@
-// import Rockets from './components/rocketList';
-import MissionList from './components/missionList';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Nav from './components/Nav';
+import Missions from './components/MissionList';
+import Rockets from './components/RocketList';
+import MyProfile from './components/MyProfile';
+import Dragon from './components/Dragon';
 
-export default function App() {
-  return (
-    <div className="App">
-      <MissionList />
-    </div>
-  );
-}
+const App = () => (
+  <BrowserRouter>
+    <Nav />
+    <Routes>
+      <Route exact path="/" element={<Rockets />} />
+      <Route path="/missions" element={<Missions />} />
+      <Route path="/dragon" element={<Dragon />} />
+      <Route path="/myprofile" element={<MyProfile />} />
+    </Routes>
+  </BrowserRouter>
+);
+
+export default App;

src/components/Dragon.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Dragon = () => (
+  <div>
+    <h1>Work in progress</h1>
+  </div>
+);
+
+export default Dragon;

src/components/missionList.js → src/components/MissionList.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import MissionsComponent from './missionItem';
+import MissionsComponent from './MissionItem';
 import { getMissionFromApi } from '../redux/reducers';
 
 const MissionList = () => {

src/components/MyProfile.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const MyProfile = () => (
+  <div>
+    <h1>Work in progress</h1>
+  </div>
+);
+
+export default MyProfile;

src/components/Nav.js

@@ -0,0 +1,21 @@
+import { NavLink } from 'react-router-dom';
+import logoo from './logo.png';
+
+const Nav = () => (
+  <div className="nav">
+    <nav className="same">
+      <h1 className="heading">
+        <img src={logoo} className="App-logoo" alt="logoo" width="70px" height="70px" />
+        Space Traveller&apos;s Hub
+      </h1>
+      <ul className="nav-link">
+        <NavLink activeClassName="selected" to="/">Rockets</NavLink>
+        <NavLink activeClassName="selected" id="mission" to="/missions">Missions</NavLink>
+        <NavLink activeClassName="selected" to="/dragon">Dragon</NavLink>
+        <NavLink activeClassName="selected" to="/myprofile">My Profile</NavLink>
+      </ul>
+    </nav>
+  </div>
+);
+
+export default Nav;

src/components/rocketList.js → src/components/RocketList.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { getRocketFromApi } from '../redux/reducers';
-import Rock from './rocketItem';
+import Rock from './RocketItem';
 
 const Rockets = () => {
   const dispatch = useDispatch();