Javascript 什么'；使用参数链接到路由的正确方法是什么？

我在

app.js

中设置了这些路线：

import { BrowserRouter, Route, Switch } from 'react-router-dom';

<BrowserRouter>
    <Switch>
        <Route name="overview" exact path="/" component={OverviewPage}  />
        <Route name="details1" exact path="/orders/:orderReference/details1" component={DetailsOnePage}/>
        <Route name="details2" exact path="/orders/:orderReference/details2" component={DetailsTwoPage}/>
    </Switch>
</BrowserRouter>

从'react router dom'导入{BrowserRouter，Route，Switch}；

这些路由通过智能组件中的按钮调用：

import { Link } from 'react-router-dom';

<IconButton aria-label="Details One">
    <Link to="details1" params={{ orderReference: order.orderReference }}>
        <PickingIcon />
    </Link>                
</IconButton>

从'react router dom'导入{Link}；

我希望这条路线能够：

但它是：

这是不存在的

我选中了，

order.orderReference

确实包含值

my reference

---

上面的代码有什么问题？

在链接到的链接中，您必须提供完整的订单路径，如

<Link to={`/orders/${order.orderReference}/details1`} >
    <PickingIcon />
</Link> 

这是可行的，但难道不能通过路由名称进行导航吗？@spike，使用React路由器的路由导航目前只能通过路径而不是名称进行导航