【问题标题】：How to specify react-router-dom routes in order for matching?如何指定 react-router-dom 路由以进行匹配？
【发布时间】：2021-11-13 06:23:53
【问题描述】：

我使用带有指定版本的以下依赖项的反应

{
  "react-router-dom": "^5.2.0",
  "react-dom": "^16.14.0",
}

我想要这样的路线

首页
关于
首页/测试
Home/Test/New

我有

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

在仪表板上我有这个

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

但在"/dashboard/buyList/new" 中正在加载"/dashboard/buyList" 的组件

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

您可以将exact 参数添加到/dashboard/buyList

<Switch>
    <Route path= '/dashboard/buyList' component={BuyList} exact />
    <Route exact path='/dashboard/buyList/new' component={NewBuy} />
    //other routes
<Switch>

【讨论】：

【解决方案2】：

问题

您只需要一个路由器，因此请移除仪表板路由周围的嵌套Router。
到处添加exact 属性并不是灵丹妙药。它不一定会在这里正确解决您的问题。 Switch 组件仅呈现它找到的第一个匹配项，即使您真正想要匹配和呈现的匹配项位于“列表”的后面。在这种情况下，“/dashboard/buyList”没有“/dashboard/buyList/new”那么具体，但因为它是实际路径“/dashboard/buyList/new”的前缀，所以它被匹配并呈现.

解决方案

删除无关的Router。确保您已指定从最具体到最不具体的路由路径。如果订购正确，则绝对不需要 exact 道具。

"/dashboard/buyList/new" 比@987654327 更具体@ 比"/dashboard/buyList" 更具体等等。

另外，从 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>

【讨论】：