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




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


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

function BootstrapApp() {
  return (
          <App />

export default BootstrapApp;


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

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

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 />

Syntax 2

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