首頁  >  問答  >  主體

React Router Typescript 正在「加入」幾個 html 頁面及其 css 完全破壞了我的應用程式

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”,從一開始我就在打字稿模板中完成它,所以因為我沒有找到解決方案,所以我啟動了一個新的應用程式並將我的組件傳遞給新應用程序,並重寫了路由器,從那時起它就像這樣

P粉838563523P粉838563523426 天前451

全部回覆(2)我來回復

  • P粉242741921

    P粉2427419212023-09-13 13:55:56

    我認為這是您的主/索引頁面。

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

    作為學習者,我可能是錯的,但添加 /* 會使它成為通配符路線。這意味著您在 / 之後放置的任何內容都會轉到 元件。

    回覆
    0
  • P粉574695215

    P粉5746952152023-09-13 09:28:10

    嘗試這樣做:

    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;

    回覆
    0
  • 取消回覆