React Router Typescript is "joining" several html pages and their css completely breaking my application

Question

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

import PacientsPage from "../components/mainPage/pacientesPage/pacietspage";
import Mainpage from "../components/mainPage/mainpage";
import BedsPage from "../components/mainPage/bedsPage/bedspage";
import DoctorsPage from "../components/mainPage/doctorsPage/doctorsPage";
import InternationPage from "../components/mainPage/internationsPage/internationpage";
import LoginPage from "../components/loginPage/loginpage";
const MyRoutes = () => {
   return(
    <BrowserRouter>
    <Routes>
       <Route path="/*" Component={Mainpage}></Route>
       <Route path="/login" Component={LoginPage}></Route>
       <Route path="/patients" Component={PacientsPage}></Route>
       <Route path="/beds" Component={BedsPage}></Route>
       <Route path="/doctors" Component={DoctorsPage}></Route>
       <Route path="/internations" Component={InternationPage}></Route>
       </Routes>
    </BrowserRouter>
       
   )
}

export default MyRoutes;

My goal was just to navigate between pages, and now nothing works anymore I calmly went to do my navigation, I had a problem where react started asking for "index.js" and from the beginning I did it in the template for typescript, so since I didn't find a solution I started a new application and passed my components to the new application and I rewrote the router, since then it's like this

Answer 1

Try doing this:

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

import PacientsPage from "../components/mainPage/pacientesPage/pacietspage";
import Mainpage from "../components/mainPage/mainpage";
import BedsPage from "../components/mainPage/bedsPage/bedspage";
import DoctorsPage from "../components/mainPage/doctorsPage/doctorsPage";
import InternationPage from "../components/mainPage/internationsPage/internationpage";
import LoginPage from "../components/loginPage/loginpage";
const MyRoutes = () => {
   return(
    <BrowserRouter>
    <Routes>
       <Route path="/*" element={<Mainpage/>}></Route>
       <Route path="/login" element={<LoginPage/>}></Route>
       <Route path="/patients" element={<PacientsPage/>}></Route>
       <Route path="/beds" element={<BedsPage/>}></Route>
       <Route path="/doctors" element={<DoctorsPage/>}></Route>
       <Route path="/internations" element={<InternationPage/>}></Route>
       </Routes>
    </BrowserRouter>
       
   )
}

export default MyRoutes;

Read more at React Router v6

Answer 2

What I think is that this is your main/index page.

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

as a learner I might be wrong but adding /* makes this a wildcard route. which means whatever you put after / it will gto to <Mainpage/> component.