反应组件未显示在匹配的路线上（react-router-dom）

Question

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

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

只有路径与路径=“/”和路由与路径=“/患者/：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组件中，我从'react-router-dom'导入{Link}。并在我声明要从“ react-router-dom”导入的路径{BrowserRouter，Route，Switch}的文件中；

我究竟做错了什么？

Answer 1

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

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