用参数链接到路线的正确方法是什么？ [英] What's the proper way to link to a route with parameters?

问题描述

我在 app.js 中设置了以下路线：

I have these routes set up in 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>

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

These routes are called via buttons in a smart component:

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 确实包含值我的引用。

上面的代码有什么问题？

What's wrong with the above code?

推荐答案

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

In your Link to prop you have to provide the complete order path like

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

这篇关于用参数链接到路线的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！