What's the proper way to link to a route with

问题:

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>

I would expect this to route to:

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

But it goes to:

http://localhost:3000/details1

Which doesn't exist.

I checked, order.orderReference does indeed contain the value my-reference.

What's wrong with the above code?

回答1:

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

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