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

只有 路径为“/”的路径“ 和 路径为路径 =”/patient/:id“ 的路径有效，其他3条路线只是没有显示对应路径的组件。

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

<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'; 并在我声明路由的文件中 从 'react-router-dom';

导入 { BrowserRouter, Route, Switch }

我做错了什么？

Answer 1

这里的问题是您没有为父路由使用 exact 道具。默认情况下，Route 不进行精确匹配。以路径 / 为例，/ 和 /patient 都被视为匹配项。因此，即使在您的情况下，/patient/:id/ 路由也匹配从 /patient/:id/ 开始的所有其他路由路径。由于 Switch 仅呈现第一个匹配项，因此即使对于 /patient/:id/patient_profile/admission_form.

等其他路径，它也始终呈现 PatientWrapper

使用如下的 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>

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

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

React Component not showing on matched Route (react-router-dom)

reactjs

react-router-dom