时间戳

首页 > 解决方案 > 在同一级别的路径中反应路由器 4 不明确匹配

reactjs - 在同一级别的路径中反应路由器 4 不明确匹配

问题描述

我可以用那些模棱两可的路径渲染正确组件的最佳方法是什么，目前无论传递什么值，它总是落在第一个匹配项中。

<Switch>
    <Route exact path={"/:vehicleclass/:categoryname/"} render={({ match, history }) => <Make history={history} match={match} {...props}/>} />
    <Route exact path={"/:vehicleclass/:manufacturername/"} render={({ match, history }) => <Year history={history} match={match} {...props}/>} />
    <Route exact path={"/:vehicleclass/:categoryname/:manufacturername/"} render={({ match, history }) => <Year history={history} match={match} {...props}/>} />
    <Route exact path={"/:vehicleclass/:manufacturername/:year/"} render={({ match, history }) => <Model history={history} match={match} {...props}/>} />
    <Route exact path={"/:vehicleclass/:year/:manufacturername/:model/"} render={({ match, history }) => <Value history={history} match={match} {...props}/>} />   </Switch>

标签： reactjsreact-router-v4

解决方案

如果我输入以下路径/sedan/foo，路由器将只匹配第一个路径，因为它无法知道您输入的是类别名称还是制造商名称。（您没有确切的路径，sedan因此它会认为这是一个选项，并将第一个与选项匹配）

/:vehicleclass/:categoryname/ == /:vehicleclass/:manufacturername/因为它认为它是/option1/option2

你需要考虑它是category/:categoryname/vehicleclass/:vehicleclass有效/category/option1/vehicleclass/option2的

推荐阅读