React Router路由配置后DoctorShow组件无法正常显示问题求解

问题排查与解决方案 #

核心问题1：react-router-dom版本不兼容 #

如果你的项目安装的是react-router-dom v6版本，会直接导致现有路由代码失效，原因是v6做了大量不兼容更新：

• 废弃了Switch组件，替换为Routes组件
• 废弃了Route的component属性，替换为element属性，值为JSX对象
• 路由匹配默认就是精确匹配，不需要加exact属性

核心问题2：/DoctorShow路由加了exact属性导致子路由失效 #

你给/DoctorShow的Route配置了exact严格匹配，如果你是从其他页面跳转到/DoctorShow/xxx形式的子路由路径，严格匹配规则会直接跳过该Route，导致DoctorShow组件根本不会渲染，自然也看不到内部的子路由内容。

核心问题3：MainGet.js冗余引入BrowserRouter #

你已经在index.js全局包裹了一层BrowserRouter，MainGet.js里的import { BrowserRouter as Router } from "react-router-dom"属于冗余引入，如果后续不小心在MainGet里又套了一层Router，会导致路由上下文冲突，路由匹配完全失效。

修复步骤 #

步骤1：确认react-router-dom版本，适配对应语法

执行命令查看版本：
npm list react-router-dom

• 如果是v5版本：直接修改MainGet.js的/DoctorShow路由，去掉exact属性，同时删掉无用的BrowserRouter引入即可：

// MainGet.js v5版本修正后代码
import React from "react";
import { Switch, Route } from "react-router-dom";
import GetStartedPage from "./GetStartedPage";
import Login from "./Login";
import Signup from "./Signup";
import DoctorShow from "../DoctorSidebar/DoctorShow";
import PatientShow from "../PatientSidebar/PatientShow";

const MainGet = () => {
  return (
    <Switch>
      <Route exact path="/" component={GetStartedPage}></Route>
      <Route path="/Login" component={Login}></Route>
      <Route path="/Signup" component={Signup}></Route>
      {/* 去掉exact属性，支持子路由匹配 */}
      <Route path="/DoctorShow" component={DoctorShow}></Route>
      <Route path="/PatientShow" component={PatientShow}></Route>
    </Switch>
  );
};

export default MainGet;

• 如果是v6版本：需要重写所有路由语法，同时给父路由路径加通配符*支持子路由匹配：

// MainGet.js v6版本修正后代码
import React from "react";
import { Routes, Route } from "react-router-dom";
import GetStartedPage from "./GetStartedPage";
import Login from "./Login";
import Signup from "./Signup";
import DoctorShow from "../DoctorSidebar/DoctorShow";
import PatientShow from "../PatientSidebar/PatientShow";

const MainGet = () => {
  return (
    <Routes>
      <Route path="/" element={<GetStartedPage />}></Route>
      <Route path="/Login" element={<Login />}></Route>
      <Route path="/Signup" element={<Signup />}></Route>
      {/* 加*通配符匹配所有/DoctorShow开头的子路由 */}
      <Route path="/DoctorShow/*" element={<DoctorShow />}></Route>
      <Route path="/PatientShow/*" element={<PatientShow />}></Route>
    </Routes>
  );
};

export default MainGet;

同时需要确认DoctorMain里的子路由路径要以/DoctorShow/开头，或者使用相对路径适配父路由。

步骤2：验证跳转逻辑

确认你触发跳转的NavLink的to属性拼写正确，大小写和路由配置完全一致。

内容的提问来源于stack exchange，提问作者Arijit Kumar