React组件未显示在匹配的路由上（React路由器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>

只有路径为“/”的路由和路径为“/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>

在头组件中，我从'react router dom'导入{Link}；在我声明路由的文件中，我从'react router dom'导入{BrowserRouter，Route，Switch}；

我做错了什么？

Answer 1

渲染管线时，请确保将其包裹：

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

Answer 2

这里的问题是您没有为父路由使用精确的道具。默认情况下，路由不会进行精确匹配。作为path/的示例，/和/病人都被认为是匹配的。因此，即使在您的情况下，/患者/： id/路由也匹配从/患者/： id/开始的所有其他路由路径。由于Switch只呈现第一个匹配，所以即使对于其他路径，如/病人/： id/patient_profile/admission_form，它也总是呈现病人包装。

使用如下所示的exactprop，您可以明确指示路线精确匹配。

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