React 组件未显示在匹配的路由上（react-router-dom）

大家好，我不知道发生了什么事。 我有以下路线：

<BrowserRouter>
  <div>
    <Switch>
      <Route path="/patient/:id/" component={PatientWrapper} />
      <Route path="/patient/:id/patient_profile/admission_form" component={PatientAdmission} />
      <Route path="/patient/:id/patient_profile/discharge_form" component={PatientDischarge} />
      <Route path="/patient/:id/patient_profile/encounter_details" component={PatientEncounterDetails} />
      <Route path="/" component={App} />
    </Switch>
  </div>
</BrowserRouter>

Only 路径路径为“/” and 路径为 path="/patent/:id"那些正在工作，其他 3 条路线只是没有显示与该路径相对应的组件。

这就是我访问路线的方式。我有一个标题组件，上面有正确的链接。见下文

<ul className="dropdown-menu dropdown-messages">
    <li><Link to={"/patient/" + this.props.id +"/patient_profile/admission_form"} id="admission-link" >Admission</Link></li>
     <li><Link to={"/patient/" + this.props.id +"/patient_profile/discharge_form"} id="discharge-link">Discharge</Link></li>
     <li className="divider"></li>
     <li><Link to={"/patient/" + this.props.id +"/patient_profile/encounter_details"} id="encounter-details">Encounter Details</Link></li>
</ul>

在标题组件中我从'react-router-dom'导入{链接}；在我声明路线的文件中从 'react-router-dom' 导入 { BrowserRouter, Route, Switch };

我究竟做错了什么？

这里的问题是你没有使用exact支持您的父路线。默认情况下，Route 不进行精确匹配。作为路径的示例/, both / and /patient被视为匹配。所以即使在你的情况下，/patient/:id/路由匹配所有其他路由路径，从/patient/:id/。由于 Switch 仅渲染第一个匹配项，因此即使对于其他路径（例如/patient/:id/patient_profile/admission_form.

Using exact如下所示，您可以显式指示 Route 完全匹配。

<BrowserRouter>
  <div>
    <Switch>
      <Route exact path="/" component={App} />
      <Route path="/patient/:id/" exact component={PatientWrapper} />
      <Route path="/patient/:id/patient_profile/admission_form" component={PatientAdmission} />
      <Route path="/patient/:id/patient_profile/discharge_form" component={PatientDischarge} />
      <Route path="/patient/:id/patient_profile/encounter_details" component={PatientEncounterDetails} />
    </Switch>
  </div>
</BrowserRouter>