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

Posted 2023-02-19

【中文标题】React 组件未显示在匹配的路由上（react-router-dom）

【英文标题】：React Component not showing on matched Route (react-router-dom)

【发布时间】：2017-10-26 19:01:45

【问题描述】：

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

<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>

只有 Route with path="/" 和 Route with path="/patient/: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>

在 Header 组件中，我 import Link from 'react-router-dom'; 以及在我声明路由的文件中，我 import BrowserRouter, Route, Switch 来自'react-router-dom';

我做错了什么？

【问题讨论】：

一个松散的猜测：尝试将第一个患者路径重新排序到路径更复杂的路径之下

【参考方案1】：

这里的问题是您没有为父路由使用exact prop。默认情况下，Route 不会进行完全匹配。作为路径/ 的示例，/ 和/patient 都被视为匹配项。因此，即使在您的情况下，/patient/:id/ 路由也匹配从/patient/:id/ 开始的所有其他路由路径。由于 Switch 仅渲染第一个匹配项，因此即使对于 /patient/:id/patient_profile/admission_form 等其他路径，它也始终渲染 PatientWrapper。

如下使用exact prop，您可以明确指示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>

【讨论】：

不客气。我用更好的解释更新了答案。

谢谢你的解释，我还有很多需要学习

【参考方案2】：

确保在渲染路由时将它们包裹起来：

<BrowserRouter>
    <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>
</BrowserRouter>