React 组件未显示在匹配的路由上 (react-router-dom) [英] React Component not showing on matched Route (react-router-dom)

问题描述

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

<div><开关><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}/></开关>

</BrowserRouter>

只有 Route with path="/" 和 Route with path="/patient/:id" 有效，其他 3 条路线没有显示路径对应的组件.

这就是我访问路线的方式.我有一个带有正确链接的标题组件.见下文

<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">遭遇详情</Link></li>

在 Header 组件中我 import { Link } from 'react-router-dom'; 和在我声明路由的文件中我 import { BrowserRouter, Route, Switch } from'反应路由器-dom';

我做错了什么?

解决方案

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

使用 exact 道具，如下所示，您可以明确指示 Route 完全匹配.

<div><开关><路由精确路径="/" component={App}/><Route path="/patient/:id/" 精确组件={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}/></开关>

</BrowserRouter>

Hey everyone I dont know whats going on. I have the following routes:

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

Only Route with path="/" and Route with path="/patient/:id" are the ones working, the other 3 routes are just not showing the component that corresponds to the path.

This is how I access to the Route. I have a Header Component with the proper links on it. See below

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

In the Header component I import { Link } from 'react-router-dom'; and in the file where I declare the routes I import { BrowserRouter, Route, Switch } from 'react-router-dom';

What am I doing wrong?

解决方案

The problem here is you are not using exact prop for your parent routes. By default, Route doesn't do an exact match. As an example for path /, both / and /patient are considered as matches. So even in your case, /patient/:id/ Route matches for all other routes path which starts from /patient/:id/. Since Switch only renders the first match, it always renders PatientWrapper even for other paths like /patient/:id/patient_profile/admission_form.

Using exact prop as follows you can explicitly instruct Route to match exactly.

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

这篇关于React 组件未显示在匹配的路由上 (react-router-dom)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！