reactjs – React组件未显示在匹配的路由上(react-router-dom)
发布时间:2020-12-15 16:15:02 所属栏目:百科 来源:网络整理
导读:嘿大家我不知道发生了什么事. 我有以下路线: BrowserRouter div Switch Route path="/patient/:id/" component={PatientWrapper} / Route path="/patient/:id/patient_profile/admission_form" component={PatientAdmission} / Route path="/patient/:id/pa
嘿大家我不知道发生了什么事.
我有以下路线: <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> 只有Route = path /“/”和Route with path =“/ 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> 在Header组件中,我从’react-router-dom’导入{Link};在我声明路由的文件中,我从’react-router-dom’导入{BrowserRouter,Route,Switch}; 我究竟做错了什么? 解决方法
这里的问题是你没有为你的父路线使用
exact 道具.默认情况下,Route不会完全匹配.作为路径/的示例,/和/患者都被视为匹配.因此,即使在您的情况下,/ patient /:id / Route匹配从/ patient /:id /开始的所有其他路径路径.由于Switch仅渲染第一个匹配项,因此它总是呈现PatientWrapper甚至是其他路径,例如/ patient /:id / patient_profile / admission_form.
使用如下的精确道具,您可以明确指示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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |