我在以下位置设置了这些路线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
确实包含值my-reference
。
上面的代码有什么问题?
在您的 Linkto
道具中,您必须提供完整的订单路径,例如
<Link to={`/orders/${order.orderReference}/details1`} >
<PickingIcon />
</Link>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句