dev-ua/reactjs

For now locally I have changed my "Home" component route / to /app-name, then it works fine and render the page!

But in deployment, it also shows…

This is my APP.jsx component

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CardSection from "../DisplayBookContainer/CardSection";
import DisplayBook from "../DisplayBookContainer/DisplayBook";
import Home from "../Home/Home";
import NavBar from "../NavBar/NavBar";
import Footer from "../FooterContainer/Footer";
import { createContext, useState } from "react";

console.log(CardSection);
export let globalData = createContext();

function App() {
  const [searchData, serSearchData] = useState("");
  return (
    <globalData.Provider value={{ searchData, serSearchData }}>
      <Router>
        <div className="App">
          <NavBar />
          <Routes>
            <Route exact path="/bookstore" element={<Home />}></Route>
            <Route exact path="/results" element={<DisplayBook />}></Route>
          </Routes>
          <Footer />
        </div>
      </Router>
    </globalData.Provider>
  );
}

export default App;

But in home page it showing look like this

The code for Home compoment is

import React from "react";
import FeatureAuthor from "../FeatureAuthors/FeatureAuthor";
import GallaryCardContainer from "../GallaryContainer/GallaryCardContainer";
import CollectionSection from "./CollectionSection";

function Home() {
  return (
    <div className="App">
      <CollectionSection />
      <div className="flat-banner">
        <img
          src="    https://d2g9wbak88g7ch.cloudfront.net/promotionimages/1_alltimefavourite.jpg"
          alt="banner img"
          style={{ maxWidth: "100%", marginTop: ".2rem" }}
        />
      </div>
      <GallaryCardContainer />
      <FeatureAuthor />
    </div>
  );
}

export default Home;