React Router TypeScript整合多页面CSS致应用崩溃求助

1. 修复React Router v6的路由属性错误 #

React Router v6 已彻底废弃 component/Component 属性，统一使用 element 属性传入JSX元素。你的代码仍在使用旧写法，这会导致组件无法正确挂载，进而引发渲染异常。

2. 调整路由匹配顺序 #

通配符路由 path="/*" 会匹配所有路径，若放在路由列表最前面，会导致后续所有具体路由（如/login、/patients）无法被匹配。需将具体路由放在前面，默认路由（如主页面）放在最后。

3. 避免页面组件包含根HTML标签 #

若你的页面组件（如LoginPage、PacientsPage）中包含<html>、<body>、<head>等根标签，会导致DOM结构重复，引发CSS样式冲突和页面崩溃。这些标签只能存在于public/index.html中，组件仅需编写页面内容部分。

4. 隔离页面样式 #

若每个页面都导入全局CSS文件，会导致样式叠加冲突。建议：

• 全局CSS仅在入口文件（index.tsx）中导入一次
• 页面组件使用CSS Modules（如LoginPage.module.css）或CSS-in-JS方案隔离样式

修正后的基础路由代码 #

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="/login" element={<LoginPage />} />
        <Route path="/patients" element={<PacientsPage />} />
        <Route path="/beds" element={<BedsPage />} />
        <Route path="/doctors" element={<DoctorsPage />} />
        <Route path="/internations" element={<InternationPage />} />
        {/* 默认路由放在最后，匹配根路径 */}
        <Route path="/" element={<Mainpage />} />
        {/* 可选：添加404页面路由 */}
        {/* <Route path="*" element={<NotFoundPage />} /> */}
      </Routes>
    </BrowserRouter>
  );
};

export default MyRoutes;

若Mainpage是带导航的布局组件 #

如果Mainpage包含公共导航栏，可使用嵌套路由避免重复渲染导航：

// Mainpage组件中添加Outlet用于渲染子路由内容
import { Outlet } from "react-router-dom";

const Mainpage = () => {
  return (
    <div>
      {/* 公共导航栏 */}
      <nav>
        <a href="/patients">患者</a>
        <a href="/beds">床位</a>
        <a href="/doctors">医生</a>
        <a href="/internations">住院信息</a>
      </nav>
      {/* 渲染当前子路由的页面内容 */}
      <Outlet />
    </div>
  );
};

// 调整路由为嵌套结构
const MyRoutes = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* 登录页不使用布局 */}
        <Route path="/login" element={<LoginPage />} />
        {/* 布局路由，所有子路由共享Mainpage的导航 */}
        <Route path="/" element={<Mainpage />}>
          <Route path="patients" element={<PacientsPage />} />
          <Route path="beds" element={<BedsPage />} />
          <Route path="doctors" element={<DoctorsPage />} />
          <Route path="internations" element={<InternationPage />} />
        </Route>
        {/* 404页面也使用布局 */}
        <Route path="*" element={<Mainpage />} />
      </Routes>
    </BrowserRouter>
  );
};

内容的提问来源于stack exchange，提问作者Kayk Caputo