How can I correctly route in index.js?

Question

Im creating a blog project using React (MERN) and when rendering this happens:

My code on index.js is this:

import React from 'react';
import  ReactDOM from 'react-dom';
import { HashRouter, Route } from 'react-router-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';

import Signin from './components/Signin';
import Signup from './components/Signup';
import Home from './components/Home';
import HeaderApp from './components/HeaderApp';

ReactDOM.render(<HeaderApp/>,document.getElementById('header'));
ReactDOM.render(
<HashRouter>
    <div>
      <Route exact path='/' Component={Signin}/>
    </div>
</HashRouter>, document.getElementById('root'))

reportWebVitals();

Also for note, im using two elements to display in the index.html file, hence the two renders:

Update: Added the code of the Signin Component

Answer 1

You are missing the <Routes> tag

Example:

function App() {
  return (
    <HashRouter basename="/app">
      <Routes>
        <Route path="/" /> {/*  Renders at /#/app/ */}
      </Routes>
    </HashRouter>
  );
}

Your code should be:

<HashRouter>
    <div>
     <Routes>
       <Route exact path='/' Component={Signin}/>
     </Routes>  
    </div>
</HashRouter>

More info in: https://reactrouter.com/en/main/router-components/hash-router