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

时间:2017-05-26 01:25:27

标签: reactjs 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>

路径与路径=&#34; /&#34; 路线与路径=&#34; / patient /:id&#34; 是一些工作,其他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>

在页眉组件中,我从反应路由器dom&#39 ;; 导入{链接},并在我声明路由的文件中 import {BrowserRouter,来自&#39; react-router-dom&#39 ;;

的路由,切换}

我做错了什么?

2 个答案:

答案 0 :(得分:1)

这里的问题是你没有为你的父路线使用exact道具。默认情况下,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>

答案 1 :(得分:0)

请确保在渲染路线时将其包裹起来:

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