dynamic routing fixed

package.json

@@ -47,5 +47,8 @@
   },
   "overrides": {
     "autoprefixer": "10.4.5"
+  },
+  "resolutions": {
+    "autoprefixer": "10.4.5"
   }
 }

src/App.css

@@ -20,22 +20,20 @@
 }
 
 .navbar-nav {
-  align-items: center;
   margin: 5px auto;
-  font-size: 1.6rem;
+  font-size: 1.54rem;
 }
 
 .accent {
   color: #80ff00;
 }
 
-.nav-links {
-  display: flex;
-  justify-content: space-between;
-  color: white;
-  align-items: center;
+.active {
+  color: #80ff00 !important;
+  font-weight: bold !important;
 }
 
+
 /* Home */
 
 .containers {
@@ -54,10 +52,7 @@ h2 {
   margin-bottom: 4%;
 }
 
-.active {
-  color: #80ff00 !important;
-  font-weight: bold;
-}
+
 
 /* Search */
 

src/App.js

@@ -5,7 +5,7 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
 import Home from "./components/Home";
 import Episodes from "./components/Episodes";
 import Locations from "./components/Locations";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import ToTopBtn from "./components/ToTopBtn";
 import Navigation from "./components/Navigation";
 
@@ -65,6 +65,7 @@ function App() {
         })
       );
       setEpisodeCharacters(charactersData);
+      setLoading(false);
     })();
   }, [episodeApi]);
 
@@ -112,19 +113,16 @@ function App() {
 
   return (
     <div className="App">
-
-      <Router>
+      <BrowserRouter>
         <ThemeProvider theme={theme}>
-          {/* <CssBaseline /> */}
-          <Navigation clearAll={clearAll}/>
-
+          <Navigation clearAll={clearAll} />
           <ToTopBtn />
           <Routes>
             <Route
               path="/"
               element={
                 <Home
-                  results={results ? results : "loading"}
+                  results={loading ? "loading" : results}
                   page={page}
                   setPage={setPage}
                   stat={status}
@@ -137,6 +135,7 @@ function App() {
                   searchInput={searchInput}
                   setSearchInput={setSearchInput}
                   info={info}
+                  loading={loading}
                 />
               }
             />
@@ -166,7 +165,7 @@ function App() {
             />
           </Routes>
         </ThemeProvider>
-      </Router>
+      </BrowserRouter>
     </div>
   );
 }

src/components/Episodes.js

@@ -11,14 +11,13 @@ const Episodes = ({
 }) => {
   return (
     <div className="containers">
-      <div className="episode-heading" style={{marginBottom: "47px"}}>
+      <div className="episode-heading" style={{ marginBottom: "4.5%" }}>
         <h1>
           {episodeData.episode}:{" "}
           <span className="accent">{episodeData.name}</span>
         </h1>
-          <h2 >Air date: {episodeData.air_date}</h2>
+        <h2>Air date: {episodeData.air_date}</h2>
       </div>
-
       <Grid container spacing={5} className="grid-container">
         <Grid xs={12} sm={4} md={3}>
           <DropDown

src/components/Home.js

@@ -18,6 +18,7 @@ const Home = ({
   searchInput,
   setSearchInput,
   info,
+  loading
 }) => {
   return (
     <div className="containers">
@@ -38,7 +39,7 @@ const Home = ({
             clearSearch={clearSearch}
           ></Filter>
         </Grid>
-        <CardItem results={results} />
+        <CardItem results={results ? results: null} />
       </Grid>
       <PaginationBar info={info ? info : ""} page={page} setPage={setPage} />
     </div>

src/components/Locations.js

@@ -24,7 +24,6 @@ const Episodes = ({
           </h2>
         </div>
       </div>
-
       <Grid container spacing={5} className="grid-container">
         <Grid xs={12} sm={4} md={3}>
           <DropDown

src/components/Navigation.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Nav, Navbar, NavLink } from "react-bootstrap";
-import { Link } from "react-router-dom";
+import { NavLink as Link } from "react-router-dom";
 
 const Navigation = ({ clearAll }) => {
   return (
@@ -15,12 +15,7 @@ const Navigation = ({ clearAll }) => {
         />
         <Navbar.Collapse id="navbarScroll">
           <Nav onClick={clearAll}>
-            <NavLink
-              eventKey="1"
-              as={Link}
-              to="/"
-              className={({ isActive }) => (isActive ? "active" : "inactive")}
-            >
+            <NavLink eventKey="1" as={Link} to="/">
               Characters
             </NavLink>
             <NavLink eventKey="2" as={Link} to="/episode">