Issue with React Router paths not matching Location

Question

I'm new to React and ViteJs, my issue right now is that for some reason that I don't know it does not find an exact path that I defined. Here is my latest attempt

import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Routes,
  Link
} from "react-router-dom";
import Auth from './components/auth';

function App() {
  return (
    <Router>
      <Routes>
        <Route path={"/SignIn"} exact element={<Auth />} />
        <Route path={"/About"} exact element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

I did however tried with Layout too but it made no difference, I also tried restarting the server cache clear , checked all the dependencies , so it has to be some kind of logic error I think.

Answer 1

I tested it. Its working just fine when you switch out and with customJSX. Which means the routing is correctly setup. Maybe theres something wrong or conditional in those components because of which nothing renders.