I am trying to implement hash-based routing in my React App. below is my code setup;

index.js

import('./bootstrap');

bootstrap.jsx

ReactDOM.render(<BootstrapApp />, document.getElementById("root"))

BootstrapApp.js

import { Route, BrowserRouter, Routes } from 'react-router-dom';
import {HashRouter as Router} from 'react-router-dom';
import App from './App';

function BootstrapApp() {
  return (
      <Router>
        <ThemeProvider>
          <App />
        </ThemeProvider>
      </Router>
  );
}

export default BootstrapApp;

App.js

import { Route, Routes } from "react-router-dom";
//import {HashRouter as Router} from 'react-router-dom';
import MyInq from "./my-inq/MyInq";

function App() {
  return (
    <>
      <div>
        {/*
        <Routes>
          <Route path="/my-inq" element={<MyInq />} />
        </Routes>
        */}
        <Routes>
          <Route path="/*" element={<MyInq />} />
          <Route path="/my-inq/*" element={<MyInq />} />
        </Routes>
      </div>
    </>
  );
}

export default App;

In MyInq.js, all I have is a function component that renders “Hello World”

Now, all I want is if I hit the URL http://localhost:3001/#/my-inq
it should render the “Hello World” from MyInq component

With the above setup, while I am able to render that. But if I remove this line from App.js

<Route path="/*" element={<MyInq />} />

then it does not render. Not sure why that is the case.

Also, I wanted to know if there is any difference between these 2 ways of defining the routes;

Syntax 1

<Route exact path="/MyInq">
  <MyInq />
</Route>

Syntax 2

<Routes>
  <Route path="/*" element={<MyInq />} />
  <Route path="/my-inq/*" element={<MyInq />} />
</Routes>