React Router dom is not working when I hosted my React App with github pages?

Question

import './App.css';

import NavBar from './component/NavBar.component';

import Main from './component/main.component';

import Footer from './component/foooter.component';

import { Routes, Route, Link } from "react-router-dom";

import About from './component/NavbarComponent/about.component';

import Hire from './component/NavbarComponent/hire.component';

import Support from './component/NavbarComponent/suport.component';

function App() { return (

  <Routes>
    <Route exact path="/" element={<Main />}/>

    <Route exact path="/about" element={<About />} />

    <Route exact path="/hire" element={<Hire/>} />

    <Route exact path="/support" element={<Support />} />

    <Route path="*" element={<h1>Page not Found</h1>} />

  </Routes>
  <Footer/>
</div>

); }

export default App;

/* Website link

https://iamniteshpandit.github.io/Chalo-deploy-karte-hain/

repository link:-

https://github.com/IAMNITESHPANDIT/Chalo-deploy-karte-hain

any suggestions you can also do pull request if that would be improve my code then I will definitely accept that:)

*/

Answer 1

import './App.css';

import NavBar from './component/NavBar.component';

import Main from './component/main.component';

import Footer from './component/foooter.component';

import { Routes, Route} from "react-router-dom";

import About from './component/NavbarComponent/about.component';

import Hire from './component/NavbarComponent/hire.component';

import Support from './component/NavbarComponent/suport.component';

function App() { return (

  <Routes>
    /**here path changed path='/' into path="/Chalo-deploy-karte-hain" in-order to application would able to work with github pages  */
   

<Route exact path="/Chalo-deploy-karte-hain" element={}/>

    <Route exact path="/about" element={<About />} />

    <Route exact path="/hire" element={<Hire/>} />

    <Route exact path="/support" element={<Support />} />

    <Route path="*" element={<h1>Page not Found</h1>} />

  </Routes>

  <Footer/>

</div>

); }

export default App;