[英]How to specify react-router-dom routes in order for matching?
I use react with following dependencies with the specified versions我使用具有指定版本的以下依赖项进行反应
{
"react-router-dom": "^5.2.0",
"react-dom": "^16.14.0",
}
and I want to have a route like this我想要一条这样的路线
I have我有
<BrowserRouter>
<Switch>
<PublicRoute component={Login} path="/" exact />
<PublicRoute component={Login} path="/login" exact />
<PrivateRoute component={Dashboard} path="/dashboard"/>
<Route to="/404" component={NotFound} />
</Switch>
</BrowserRouter>
On the dashboard I have this在仪表板上我有这个
<Router>
<Navbar />
<Switch>
<Route path={`/dashboard/buyList`} component={BuyList} />
<Route exact path='/dashboard/buyList/new' component={NewBuy} />
<Route path={`/dashboard/buyList${ids.id}`} component={BuyInfo}/>
<Route path='/dashboard/showAddress' component={ShowAddress} exact/>
<Route path='/dashboard/qrScanner' component={QrScanner} exact/>
<Route path='/dashboard/productList' component={ProductList} exact/>
<Route path='/dashboard/productListCode' component={ProductListCode} exact/>
<Route path='/dashboard/deliveryScanner' component={DeliveryScanner} exact/>
<Route path='/dashboard' component={DashboardDetail} exact/>
<Route path="/404" component={NotFound} />
</Switch>
</Router>
but in "/dashboard/buyList/new"
is loading the component of "/dashboard/buyList"
但是在
"/dashboard/buyList/new"
正在加载"/dashboard/buyList"
的组件
You can add the exact
param to /dashboard/buyList
您可以将
exact
参数添加到/dashboard/buyList
<Switch>
<Route path= '/dashboard/buyList' component={BuyList} exact />
<Route exact path='/dashboard/buyList/new' component={NewBuy} />
//other routes
<Switch>
Router
around the dashboard routes.Router
。exact
prop everywhere isn't a magic bullet.exact
道具并不是灵丹妙药。 It won't necessarily solve your problem correctly here.Switch
component only renders the first match it finds, even if the one you really want to match and render is later in the "list". Switch
组件仅呈现它找到的第一个匹配项,即使您真正想要匹配和呈现的匹配项位于“列表”的后面。 In this case "/dashboard/buyList" is less specific than "/dashboard/buyList/new" but because it's a prefix to the actual path "/dashboard/buyList/new" it is matched and rendered.Remove the extraneous Router
.删除无关的
Router
。 Ensure you've specified the route paths from most specific to least specific.确保您已指定从最具体到最不具体的路由路径。 If ordered correctly there is absolutely no need for the
exact
prop.如果订购正确,则绝对不需要
exact
道具。
"/dashboard/buyList/new"
is more specific than "/dashboard/buyList${ids.id}"
is more specific than "/dashboard/buyList"
, etc.. "/dashboard/buyList/new"
比"/dashboard/buyList${ids.id}"
比"/dashboard/buyList"
更具体,等等。
Also, remove the path
prop from the 404 route so it can also be correctly matched and rendered in the case that no other routes above it match.此外,从 404 路由中删除
path
道具,以便在其上方没有其他路由匹配的情况下也可以正确匹配和呈现。
<Navbar />
<Switch>
<Route path='/dashboard/buyList/new' component={NewBuy} />
<Route path={`/dashboard/buyList${ids.id}`} component={BuyInfo} />
<Route path='/dashboard/buyList' component={BuyList} />
<Route path='/dashboard/showAddress' component={ShowAddress} />
<Route path='/dashboard/qrScanner' component={QrScanner} />
<Route path='/dashboard/productList' component={ProductList} />
<Route path='/dashboard/productListCode' component={ProductListCode} />
<Route path='/dashboard/deliveryScanner' component={DeliveryScanner} />
<Route path='/dashboard' component={DashboardDetail} />
<Route component={NotFound} />
</Switch>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.