React Router Typescript „verbindet“ mehrere HTML-Seiten und deren CSS macht meine Anwendung völlig kaputt

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;

Mein Ziel ist es nur, zwischen den Seiten zu navigieren, aber jetzt funktioniert nichts mehr Ich machte mich ruhig an die Navigation und stieß auf ein Problem, bei dem React anfing, nach „index.js“ zu fragen. Von Anfang an habe ich es in einer Typoskript-Vorlage gemacht. Da ich also keine Lösung gefunden habe, habe ich eine neue App gestartet und Ich habe meine Komponenten an die neue App übergeben und den Router neu geschrieben und seitdem ist es so

Answer 1

我认为这是您的主/索引页面。

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

作为学习者，我可能是错的，但添加 /* 会使它成为通配符路线。这意味着您在 / 之后放置的任何内容都将转到 组件。

Answer 2

尝试这样做：

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;