反应路由器dom参数问题

Question

我试图路由参数“：id”以与子路由“：id / history”反应，并且路由链接在单击时不呈现组件

<Switch>
     <Route path="/patients/:id" exact component={GeneralData} />
     <Route path="/patients/:id/history" component={History} />
</Switch>

Answer 1

Switch组件呈现与您输入的URL匹配的第一条路由

因为您在GeneralData路由中使用了通配符，

<Route path="/patients/:id" component={GeneralData}/>

无论您在/patients之后输入什么，它都会被该路由的通配符定义捕获，因为它实际上接受任何内容。因此，即使您导航到/patients/4834834/history，它仍然满足GeneralData路由，该路由在路由列表中排在第一位。

要解决此问题，只需将“历史记录路径”移动到“ GeneralData路径”上方即可。这样一来，对于仅满足GeneralData的任何内容，就不会呈现/patients/:id路由。 Switch将首先查看您的URL是否与History相匹配。

<Switch>
     <Route path="/patients/:id/history" component={History} />
     <Route path="/patients/:id" component={GeneralData} />
</Switch>

Answer 2

我认为您正在忽略exact参数。