React Router Typescript 正在“加入”几个 html 页面及其 css 完全破坏了我的应用程序

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;

我的目标只是在页面之间导航，但现在什么都不起作用了 我平静地去做我的导航，我遇到了一个问题，反应开始要求“index.js”，从一开始我就在打字稿模板中完成它，所以因为我没有找到解决方案，所以我启动了一个新的应用程序并将我的组件传递给新应用程序，并重写了路由器，从那时起它就像这样

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;