React Router Typescript "rejoint" plusieurs pages HTML et leur CSS brise complètement mon 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;

Mon objectif est juste de naviguer entre les pages mais maintenant rien ne fonctionne Je suis allé calmement faire ma navigation et j'ai rencontré un problème où React a commencé à demander "index.js" et dès le début je le faisais dans un modèle dactylographié donc comme je n'ai pas trouvé de solution, j'ai démarré une nouvelle application et j'ai transmis mon composant à la nouvelle application et j'ai réécrit le routeur et depuis c'est comme ça

Answer 1

Je pense que c'est votre page principale/index.

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

En tant qu'apprenant, je peux me tromper, mais en ajoutant le composant /* 会使它成为通配符路线。这意味着您在 / 之后放置的任何内容都将转到 .

Answer 2

Essayez ceci :

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;