javascript - 用参数链接到路由的正确方法是什么？

Question

我在以下位置设置了这些路线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>

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

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

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

我希望这会路由到：

http://localhost:3000/orders/my-reference/details1

但它会：

http://localhost:3000/details1

哪个不存在。

我查了一下，order.orderReference确实包含 value my-reference。

上面的代码有什么问题？

标签： javascriptreactjsecmascript-6routing

Answer 1

在您的 Linkto道具中，您必须提供完整的订单路径，例如

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