Как правильно связать маршрут с параметрами?

У меня есть эти маршруты, настроенные в 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://локальный:3000/details1

Которого не существует.

Я проверил, order.orderReference действительно содержит значение my-reference.

Что не так с приведенным выше кодом?